4.5K
3D rotating cube animation using HTML and CSS
Friends, we can create beautiful animation without using JavaScript. In this tutorial, I have brought to you another awesome 3D rotating cube. I have used only HTML and CSS to make this 3D rotating cube animation. I hope you will like it. Just copy the given source code and modify it according to your desire.
HTML
<!DOCTYPE html>
<html>
<head>
<title> 3D rotating cube animation </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class ="wrap">
<div class ="cube">
<div class ="face1"> 1</div>
<div class ="face2"> 2</div>
<div class ="face3"> 3</div>
<div class ="face4"> 4</div>
<div class ="face5"> 5</div>
<div class ="face6"> 6</div>
</div>
</div>
</body>
</html>
CSS
body{
background:#000;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
.wrap{
margin:auto;
width:300px;
}
.cube{
animation-name:cube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
transform-style:preserve-3d;
transform-origin:60px 60px 0;
}
.cube div{
position:absolute;
width:120px;
height:120px;
border:1px solid #ccc;
background:rgba(255,255,255,0.8);
box-shadow:inset 0 0 20px rgba(0,0,0,0.2);
line-height:120px;
text-align:center;
font-size:120px;
font-weight:bold;
}
.face1{
transform:translateZ(60px);
}
.face2{
transform:rotateY(90deg) translateZ(60px);
}
.face3{
transform:rotateY(90deg)rotateX(90deg) translateZ(60px);
}
.face4{
transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.face5{
transform:rotateY(-90deg)rotateZ(90deg) translateZ(60px);
}
.face6{
transform:rotateX(-90deg) translateZ(60px);
}
@keyframes cube{
from,to{
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16%{
transform:rotateY(-90deg);
}
33%{
transform: rotateY(-90deg) rotateZ(90deg);
}
50%{
transform: rotateY(-180deg) rotateZ(90deg);
}
66%{
transform: rotateY(-270deg) rotateX(90deg);
}
83%{
transform: rotateX(90deg);
}
}
For More Tutorials Please Click Here
