5K
3D Cube Rotating Animation
Hello, learner welcome to you in techmidpoint tutorial. In this tutorial, I am going to show you a 3D cube rotating animation using HTML and CSS. You can add different images for different positions such as top, bottom, right, left, etc., or you can add only one image.
HTML
<!DOCTYPE html> <html> <head> <title> 3D Cube Rotating Animation | Pure CSS Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="cube-wrap"> <div class="box"> <div class="single-box side-back"></div> <div class="single-box side-top"></div> <div class="single-box side-bottom"></div> <div class="single-box side-left"></div> <div class="single-box side-right"></div> <div class="single-box side-front"></div> </div> </div> </div> </body> </html>
CSS
body{ background: #262626; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 400px; height: 400px; perspective: 2000px; perspective-origin: 50% -500px; } .single-box { background-image: url(bg.jpg); background-size: cover; display: block; position: absolute; width: 360px; height: 360px; background-color: #60c2ef; transform: rotateY(45deg) translateZ(-200px) rotateX(15deg); transform-origin: 50% 50% 0; border: 3px solid #fff; } .box { transform-style: preserve-3d; animation: rotate 10s infinite linear; } .side-front { transform: translateZ(180px); } .side-back { transform: rotateY(180deg) translateZ(180px); } .side-top { background-image: url(bg.jpg); transform: rotateX(90deg) translateZ(180px); } .side-bottom { transform: rotateX(-90deg) translateZ(180px); background-image: url(bg.jpg); } .side-left { transform: rotateY(-90deg) translateZ(180px); } .side-right { transform: rotateY(90deg) translateZ(180px); } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }