Home » 3D Cube Rotating Animation | Pure CSS Animation

3D Cube Rotating Animation | Pure CSS Animation

by techmidpoint
3D Cube Rotating Animation

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); }
}

You may also like

Leave a Comment