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