<div class= "Demo" >
<span class= "front" >
Aaaaaaaaaaaaaa
</span>
<span class= "Behind" >
bbbbbbb
</span>
</div>
. demo{
Display:block;
Cursor:pointer;
position:relative;
Width:190px;/* limited to 3d display range */
height:243px;
/*-webkit-perspective:200px;*/
border:1px solid #f00;
}
. Demo span{
Display:block;
/* Specifies that the element has a 3d rollover effect */
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
/* Specifies whether the element 3d is visible on the opposite side *
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
Backface-visibility:hidden;
-webkit-transition:all. 4s ease-in-out;
-moz-transition:all. 4s ease-in-out;
-ms-transition:all. 4s ease-in-out;
-o-transition:all. 4s ease-in-out;
Transition:all. 4s ease-in-out;
}
. Demo. front{
-webkit-transform:rotatex (0DEG);
-moz-transform:rotatex (0DEG);
-ms-transform:rotatex (0DEG);
-o-transform:rotatex (0DEG);
Transform:rotatex (0DEG);
}
. Demo. front.hover{
-webkit-transform:rotatex (180DEG);
-moz-transform:rotatex (180DEG);
-ms-transform:rotatex (180DEG);
-o-transform:rotatex (180DEG);
Transform:rotatex (180DEG);
}
. Demo. behind{
/* Default this layer is the opposite side, and is not visible */
position:absolute;left:0;top:0;
display:table;
Cursor:text;
width:100%;
height:100%;
Background: #00a3cf;
-webkit-transform:rotatex (180DEG);
-moz-transform:rotatex (180DEG);
-ms-transform:rotatex (180DEG);
-o-transform:rotatex (180DEG);
Transform:rotatex (180DEG);
display:none\9;
}
. Demo. behind.hover{
-webkit-transform:rotatex (0DEG);
-moz-transform:rotatex (0DEG);
-ms-transform:rotatex (0DEG);
-o-transform:rotatex (0DEG);
Transform:rotatex (0DEG);
}
CSS3 3d Rollover Effect