Css 3d - Transform mit Animation

HTML Elemente mit 'transform' rotieren

Fotolia 54425005 S

Per Mouse-Over wird der zweite div sichtbar:

css3 Eigenschaften sind:

Diese Animation kommt ohne zusätzliches Javascript aus und verwendet die neuen 3D Transformations Möglichkeiten. Das hier eingesetzte Hover muss für mobile Geräte mit Touchscreen allerdings noch zu einem Touch-Event gewandelt werden.

Hier die benötigten Codes:


HTML

<div id="drehcontainer" class="full">
<div class="drehFront"><img src="/images/XXX.jpg"  />
</div>
<div class="drehRueck">
<p>Per Mouse-Over wird der zweite div sichtbar:</p>
<p>css3 Eigenschaften sind:</p>
<ul class="gologo">
<li>perspective: 1000px</li>
<li>transform-style: preserve-3d</li>
<li>transform:rotateY(180deg)</li>
<li>transition: all 1.0s linear;</li>
</ul>
</div>
</div>




CSS

#drehcontainer {width:40%;height:400px;margin:0 auto; position:relative;}
#drehcontainer > div {position:absolute;left:0;top:0;width:100%;height:100%;transition: 1.5s ease-in-out;background:#cdcdcd;}
.drehRueck {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: perspective(800px) rotateY(180deg);
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.drehFront {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
#drehcontainer:hover div.drehRueck {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
#drehcontainer:hover div.drehFront {
-webkit-transform: perspective(800px) rotateY(-179.9deg);
-moz-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}



Tags: html5 css3

Kommentar schreiben


Sicherheitscode
Aktualisieren

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin