<!DOCTYPE html> <html> <head> <title>SUPER AWESOME 3D CSS EFFEKT</title> <link rel="stylesheet" href="css/super_awesome_cube.css"> </head> <body> <div class="container"> <div class="cube"> <div class="side1"></div> <div class="side2"></div> <div class="side3"></div> <div class="side4"></div> <div class="side5"></div> <div class="side6"></div> </div> </div> </body> </html>
@-webkit-keyframes awesomeCubeRotation { from { -webkit-transform: rotateY(0deg) rotateX(20deg); } to { -webkit-transform: rotateY(360deg) rotateX(20deg); } } @-moz-keyframes awesomeCubeRotation { from { -moz-transform: rotateY(0deg) rotateX(20deg); } to { -moz-transform: rotateY(360deg) rotateX(20deg); } } body { background: #000; } .container { width: 100px; height: 100px; margin: 60px auto 0; position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; } .cube { position: absolute; width: 100%; height: 100%; -webkit-animation: awesomeCubeRotation 5s linear infinite; -moz-animation: awesomeCubeRotation 5s linear infinite; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .cube > div { width: 98px; height: 98px; position: absolute; background: rgba(50, 150, 200, .2); border: 1px solid orange; } .cube .side1 { -webkit-transform: rotateY(0deg) translateZ( 50px ); -moz-transform: rotateY(0deg) translateZ( 50px ); } .cube .side2 { -webkit-transform: rotateX(180deg) translateZ( 50px ); -moz-transform: rotateX(180deg) translateZ( 50px ); } .cube .side3 { -webkit-transform: rotateY(90deg) translateZ( 50px ); -moz-transform: rotateY(90deg) translateZ( 50px ); } .cube .side4 { -webkit-transform: rotateY(-90deg) translateZ( 50px ); -moz-transform: rotateY(-90deg) translateZ( 50px ); } .cube .side5 { -webkit-transform: rotateX(90deg) translateZ( 50px ); -moz-transform: rotateX(90deg) translateZ( 50px ); } .cube .side6 { -webkit-transform: rotateX(-90deg) translateZ( 50px ); -moz-transform: rotateX(-90deg) translateZ( 50px ); }