In this topic,
We are going to see how to create a cube 3d animation.
Step-1: Create Html Code in the index.html file.
<body> <div id="container"> <div id="stage"> <div id="shape" class="cube backfaces"> <div class="box one">1</div> <div class="box two">2</div> <div class="box three">3</div> <div class="box four">4</div> <div class="box five">5</div> <div class="box six">6</div> <div class="box seven">7</div> <div class="box eight">8</div> <div class="box nine">9</div> <div class="box ten">10</div> <div class="box eleven">11</div> <div class="box twelve">12</div> </div> </div> </div> </body>
Step-2: Add CSS Code in the <style>…</style> on index.html file.
body { background-color: black; color: white; font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; background-image: -webkit-gradient(radial, 50% 500, 1, 50% 500, 400, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background-repeat: no-repeat; } #container { width: 100%; height: 700px; -webkit-perspective: 800; -webkit-perspective-origin: 50% 225px; } #stage { width: 100%; height: 100%; -webkit-transition: -webkit-transform 2s; -webkit-transform-style: preserve-3d; } #shape { position: relative; top: 160px; margin: 0 auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; } .box { position: absolute; height: 200px; width: 200px; border: 1px solid white; -webkit-border-radius: 12px; -webkit-box-sizing: border-box; text-align: center; font-family: Times, serif; font-size: 124pt; color: white; background-color: rgb(0 0 0 / 60%); -webkit-transition: -webkit-transform 2s, opacity 2s; -webkit-backface-visibility: hidden; } #shape.backfaces .box { -webkit-backface-visibility: visible; } #shape { -webkit-animation: spin 8s infinite linear; } @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } } .cube > .one { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px); } .cube > .two { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px); } .cube > .three { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px); } .cube > .four { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px); } .cube > .five { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px); } .cube > .six { opacity: 0.5; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg); } .cube > .seven { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg); } .cube > .eight { -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px); } .cube > .nine { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px); } .cube > .ten { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px); } .cube > .eleven { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px); } .cube > .twelve { -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px); } .controls { width: 80%; margin: 0 auto; padding: 5px 20px; -webkit-border-radius: 12px; background-color: rgba(255, 255, 255, 0.5); } .controls > div { margin: 10px; }
Now my cube animation is working correctly.