CSS Transition – 3d rotation
Posted: July 29th, 2011 | Author: Vincent | Filed under: CSS | No Comments »CSS:
.wrapper {
position: relative;
}
.wrapper div {
position: absolute;
left: 0;
top: 0;
color: #fff;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.front {
background-color: red;
z-index: 2;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
}
.wrapper:hover .front {
z-index: 2;
-webkit-transform: rotateY(180deg);
}
.back {
background-color: blue;
z-index: 1;
-webkit-transform: rotateY(-180deg);
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
}
.wrapper:hover .back {
z-index: 3;
-webkit-transform: rotateY(0deg);
}
HTML:
<div class="wrapper">
<div class="front">FRONT</div>
<div class="back">BACK</div>
</div>