Rotate Image

Hier ein Beispiel für ein Bild, dass sich mittels CSS-Transform bei Mausüber dreht.
Tippt am Handy auf das Bild.

Nach einer Idee von Werner-Zenk.de

Der Spatz
ist eine verbreitete Bezeichnung für einen Vogel aus der Gattung der Sperlinge.
Vielen Dank an Doris
für diese schönen Fotos.

Mobirise-Tutorials.com

Hier zur Info meine CSS für die "rotierende Box", die ich in den Bereich "CSS Editor" vom "Code Editor" geschrieben habe:

.flip-container {
  perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(-180deg);
  cursor: wait;
}
.flip-container, .front, .back {
  width: 720px;
  max-width: 100%;
  height: 480px;
  color: #FFFFFF;
  background: #6A754B;
  border-radius: 30px;
  box-shadow: 5px 5px 5px #000;
}
.flipper {
  transition: 2.0s;
  transform-style: preserve-3d;
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
  background-image: url(http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatzen-Vorne.jpg);
  background-repeat: no-repeat;
}
.back {
  transform: rotateY(-180deg);
  background-image: url(http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
div.content1 {
  font-size: 12px;
  width: 150px;
  height: 120px;
  margin: 20px;
  padding: 10px;
  color: Black;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: Solid 1px rgba(255, 255, 255, 0.75);
}
div.content2 {
  font-size: 12px;
  width: 150px;
  height: 120px;
  margin: 20px;
  padding: 10px;
  color: White;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: Solid 1px rgba(255, 255, 255, 0.75);
}
div.content2 a {
  color: White;
  text-decoration: Underline;
}


Hier der Container für die "rotierende Box", den ich in einen einfachen Textblock anstelle des Beispieltextes geschrieben habe:

<!-- Beginn Inhalt darstellen -->
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
 <div class="flipper">
  <div class="front">
   <div class="content1">Der Spatz<br>ist eine verbreitete Bezeichnung für einen Vogel aus der Gattung der Sperlinge.</div>
  </div>
  <div class="back">
   <div class="content2">Vielen Dank an Doris<br>für diese schönen Fotos.<br><br><a href="http://www.mobirise-tutorials.com/" target="_blank">Mobirise-Tutorials.com</a></div>
  </div>
 </div>
</div>
<!-- Ende Inhalt darstellen -->

Rotate