Webentwicklung||flexibel + nachhaltig ...
Content Management||Wordpress, Joomla, Drupal
Design||modern und individuell
Service / Support||für Ihr gesundes Web!
Busines Partner||unser Angebot an Agenturen
Retina Ready||mobile Bilder + Grafiken
Mobile First||Standards + Framework
Mobile Starter||Ihr mobiles Web
User Experience||Click or Touch?
Strategien||Web-App - Responsive - Adaptive
Web-Paper Plugin||Text mobilisieren
Web-Planer||Erfolg durch Planung
WebTec||Html, CSS, ...
Css 3d - Transform mit Animation
HTML Elemente mit 'transform' rotieren
Per Mouse-Over wird der zweite div sichtbar:
css3 Eigenschaften sind:
- perspective: 1000px
- transform-style: preserve-3d
- transform:rotateY(180deg)
- transition: all 1.0s linear;
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);
}