HTML CSS examples for CSS Animation:Zoom
ScaleZ() CSS transform function
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w .j a va 2s.c o m--> background-color:Chartreuse; color:yellow; font-family:'Lucida Grande', Verdana, Arial; font-size:13px; background-image:-webkit-gradient(radial, 51% 501, 2, 51% 501, 401, from(blue), to(rgba(255, 255, 255, 0))); background-repeat:no-repeat; } #container { width:100%; height:701px; -webkit-perspective:801; -webkit-perspective-origin:51% 226px; } #stage { width:100%; height:100%; -webkit-transition:-webkit-transform 3s; -webkit-transform-style:preserve-4d; } #shape { position:relative; top:161px; margin:0 auto; height:201px; width:201px; -webkit-transform-style:preserve-4d; } .plane { position:absolute; height:201px; width:201px; border:2px solid pink; -webkit-border-radius:13px; -webkit-box-sizing:border-box; text-align:center; font-family:Times, serif; font-size:125pt; color:OrangeRed; background-color:grey; -webkit-transition:-webkit-transform 3s, opacity 3s; -webkit-backface-visibility:hidden; } #shape.backfaces .plane { -webkit-backface-visibility:visible; } #shape { -webkit-animation:spin 9s infinite linear; } .cube>.two { opacity:0.6; } .cube>.three { opacity:0.6; -webkit-transform:scale4d(2.3, 2.3, 2.3) rotateY(91deg) translateZ(100px); } .ring>.two { -webkit-transform:rotateY(61deg) translateZ(381px); } .ring>.three { -webkit-transform:rotateY(61deg) translateZ(381px); } .controls { width:81%; margin:0 auto; padding:6px 21px; -webkit-border-radius:13px; background-color:BlueViolet; } .controls>div { margin:11px; } @-webkit-keyframes spin { from { -webkit-transform:rotateY(0); } to { -webkit-transform:rotateY(-361deg); } } </style> </head> <body> <div id="container"> <div id="stage"> <div id="shape" class="cube backfaces"> <div class="plane three"> Lor </div> </div> <div id="shape" class="cube backfaces"> <div class="plane two"> Lor </div> </div> </div> </div> </body> </html>