HTML CSS examples for CSS Animation:3D
CSS transform 3d cube offsets
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div.test {<!--from www. j a v a2 s.c o m--> xwidth:100%; xperspective:751px; height:201px; } .cube { font-size:5em; width:501px; margin:auto; } .side { position:absolute; width:100px; height:100px; background:Chartreuse; border:2px solid yellow; color:blue; text-align:center; line-height:100px; } .front { transform:rotateX(-41deg) rotateY(33deg) translateZ(51px); z-index:1001; } .top { transform:rotateX(-41deg) rotateY(33deg) rotateX(91deg) translateZ(51px); z-index:1001; } .right { transform:rotateX(-41deg) rotateY(33deg) rotateY(91deg) translateZ(51px); } .left { transform:rotateX(-41deg) rotateY(33deg) rotateY(-91deg) translateZ(51px); z-index:1001; } .bottom { transform:rotateX(-41deg) rotateY(33deg) rotateX(-91deg) translateZ(51px); } .back { transform:rotateX(-41deg) rotateY(-149deg) translateZ(51px); } .cuboid .front { width:201px; } .cuboid .top { width:201px; } .cuboid .right { transform:rotateX(-41deg) rotateY(123deg) translateZ(151px); } .cuboid .back { width:201px; } .cuboid .bottom { width:201px; } .cuboid .left, .cuboid .right { margin-top:17px; margin-left:8px; } </style> </head> <body> <div class="test test1"> <h1>Lo</h1> <div class="cube"> <div class="side front"> Lor </div> <div class="side back"> Lor </div> <div class="side right"> Lor </div> <div class="side left"> Lor </div> <div class="side top"> Lor </div> <div class="side bottom"> Lor </div> </div> </div> <div class="test test2"> <h1>Lo</h1> <div class="cube cuboid"> <div class="side front"> Lor </div> <div class="side back"> Lor </div> <div class="side right"> Lor </div> <div class="side left"> Lor </div> <div class="side top"> Lor </div> <div class="side bottom"> Lor </div> </div> </div> </body> </html>