Home » 3D rotating cube animation using HTML and CSS

3D rotating cube animation using HTML and CSS

by techmidpoint
3D rotating cube animation using HTML and CSS

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

You may also like

Leave a Comment