Create Cube Box image in CSS | 3D Cube image Animation Effect in CSS

This tutorial blog to learn how to create a Cube Animation Effect using CSS.

Video tutorial of 3D Cube image Animation Effect in CSS

This tutorial video to learn how to create a Cube Animation Effect using CSS.

3D Cube image Animation Effect in CSS [Source Codes]

This source code can help you to create 3D Cube image Animation Effect in CSS.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<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="tree_d_box">
	<div class="tree_d_box_in">
		<span class="in_box"></span>
		<span class="in_box"></span>
		<span class="in_box"></span>
		<span class="in_box"></span>
		<span class="in_box"></span>
		<span class="in_box"></span>
	</div>
</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: #000;
}
img{
	max-width: 100%;
	max-height: 100%;
}
.tree_d_box{
	position: absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%,-50%);	
}
.tree_d_box_in{
	width: 400px;
	height: 400px;
	position: relative;
	transition: all 1s;
	transform: perspective(1000px) rotateY(0deg) rotateX(0deg) ;
	transform-style: preserve-3d;
	animation: threeDRotate 6s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
.in_box{
	width: 100%;
	height: 100%;
	position: absolute;
	border:10px solid #fff;
	display: block;
	background: url('../images/pic1.jpg') center center !important;
	background-size: cover;
	opacity: 1
}
.in_box:nth-child(1){
	transform: translateZ(200px);
	background:#fff;
}
.in_box:nth-child(2){
	transform: rotateY(180deg)  translateZ(200px);
	background:red;
}
.in_box:nth-child(3){
	transform: rotateY(-90deg) translateX(-200px);
	transform-origin: left;
	background: green
}
.in_box:nth-child(4){
	transform: rotateY(90deg) translateX(200px);
	transform-origin: right;
	background: blue
}
.in_box:nth-child(5){
	transform: rotateX(-90deg) translateZ(-200px);
	background: yellow
}
.in_box:nth-child(6){
	transform: rotateX(-90deg) translateZ(200px);
	background: deeppink
}
@keyframes threeDRotate{
	0%{ transform: perspective(1000px) rotateY(0deg) rotateX(30deg); }
	100%{ transform: perspective(1000px) rotateY(-360deg)  rotateX(30deg); }
}

Create Cube Box image in CSS | 3D Cube image Animation Effect in CSS

Video tutorial of 3D Cube image Animation Effect in CSS

3D Cube image Animation Effect in CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery