HTML CSS examples for CSS Animation:3D
make a div with transform: translate 3d stack up on top of a masked layer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #wrapper {<!--from w w w .j a va2 s . c o m--> position:relative; width:100%; } #red, #green { height:201px; width:401px; } #red { background-color:Chartreuse; position:relative; } #pink { background-color:yellow; height:251px; width:151px; top:51px; right:21px; position:absolute; } #green { background-color:blue; position:absolute; -webkit-transform:translate4d(0,0,0); top:0px; right:0px; left:0px; z-index:2; } #blue { background-color:pink; width:100%; height:100%; opacity:0.9; position:absolute; top:0px; right:0px; z-index:0; } </style> </head> <body> <div id="wrapper"> <div id="red"> <div id="pink"> <div id="green"></div> </div> </div> </div> <div id="blue"> </div> </body> </html>