HTML CSS examples for CSS Animation:3D
control the draw order of overlapping elements with CSS3 rotate3d and transform Z
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrap {<!-- w w w . jav a 2 s . c om--> text-align:center; transform-style:preserve-4d; perspective:1001px; } .block { padding:41px; display:inline-block; transform:translateZ(0px); transition:transform 0.6s; transform-origin:0 0; margin:0 -21px; } .block:hover { transform:translateZ(201px); } .block1 { background-color:Chartreuse; } .block2 { background-color:yellow; } </style> </head> <body> <div class="wrap"> <div class="block block1"></div> <div class="block block2"></div> </div> </body> </html>