3D Cube Rotating Animation | Pure CSS Animation

 

Hello friends, Today, in this project, I will share a simple yet exciting snippet based on how to create a 3D Rotating cube with pure CSS animation.  I have used pure HTML and CSS to do this project. Previously I have shared a snippet based on how to create an analog clock using HTML, CSS, and javascript.

For the snippet to work, I have taken six single div and applied some basic styling to make the box stayed entirely in the center. Later used CSS transform rotate and translate property to make it look like a box. After that, I used CSS keyframes animation to rotate the cube box.

To make the snippet, your own create an HTML and CSS file. Copy and paste the codes in your files and save.

HTML

<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>


CSS 

body{ background: #F7C339; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 400px; height: 400px; -webkit-perspective: 2000px; -webkit-perspective-origin: 50% -500px; } .single-box { background-image: url(https://i.postimg.cc/4Nwn4CfF/1.jpg); background-size: cover; display: block; position: absolute; width: 360px; height: 360px; background-color: #60c2ef; -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg); -webkit-transform-origin: 50% 50% 0; border: 3px solid #fff; } .box { -webkit-transform-style: preserve-3d; -webkit-animation: rotate 10s infinite linear; } .side-front { -webkit-transform: translateZ(180px); } .side-back { -webkit-transform: rotateY(180deg) translateZ(180px); } .side-top { background-image: url(https://i.postimg.cc/4Nwn4CfF/1.jpg); -webkit-transform: rotateX(90deg) translateZ(180px); } .side-bottom { -webkit-transform: rotateX(-90deg) translateZ(180px); } .side-left { -webkit-transform: rotateY(-90deg) translateZ(180px); } .side-right { -webkit-transform: rotateY(90deg) translateZ(180px); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } }

I hope you liked this simple CSS animation snippet. Please follow our social media links to keep yourself updated for future posts. Thank you.