CSS 3D Cube Animation Effect | Create Animated 3D Cube with CSS

3D & Animation Effects | May 23, 2022

Today in this blog you’ll learn how to create 3D animated Cube using only CSS.

Video tutorial of create 3D animated Cube using Only CSS.

This tutorial video can help you to create 3D animated Cube using Only CSS.

Create 3D animated Cube using Only CSS.[Source Codes]

This source code can help you to create 3D animated Cube using Only CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="cube">
	<div class="cube-bar"></div>
	<div class="cube-bar"></div>
	<div class="cube-bar"></div>
	<div class="cube-bar"></div>
	<span>3D</span>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #08011f;
	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.cube{
	width: 250px;
	height: 250px;
	position: relative;
	transform-style: preserve-3d;
	transform: perspective(400px);

	animation:rotateAnim 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.cube-bar{
	position: absolute;
	width: 100%;
	height: 100%;
	border:2px solid #fff;
	background: rgb(0 123 171 / 29%)
}
.cube-bar:nth-child(1){
	transform: rotateY(180deg)
	translateZ(125px)
	;
}
.cube-bar:nth-child(2){
	transform: rotateY(-90deg)
	translateZ(125px)
	;
}
.cube-bar:nth-child(3){
	transform: rotateX(90deg)
	translateZ(125px)
	;
}
.cube-bar:nth-child(4){
	transform: rotateX(-90deg)
	translateZ(125px)
	;
}
.cube span{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	font-size: 70px;
	color: rgba(255,255,255,0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;

	animation:rotateAnim2 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes rotateAnim{
	from{
		transform: perspective(400px)
		rotateY(0deg);
	}
	to{
		transform: perspective(400px)
		rotateY(360deg);
	}
}

@keyframes rotateAnim2{
	from{
		transform: rotateY(0deg);
	}
	to{
		transform: rotateY(-360deg);
	}
}