3D animated Object With 3D Background Using CSS3

This blog shows how to create a 3D object with 3D background animation using only HTML and CSS. We used liner gradients to create check pattern backgrounds and transform properties to create 3D background. We used the Transform property and the Transform-origin property to create 3D objects. We have used CSS Keyframes Animation to animate the Transform Background and Transform Object.

Video tutorial of 3D animated Object With 3D Background Using CSS3

This tutorial video can help you to create 3D animated Object With 3D Background Using CSS3

3D animated Object With 3D Background Using CSS3 [Source Codes]

This source code can help you to create 3D animated Object With 3D Background Using CSS3

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="threeDBoxArea">
	<div class="cssCheckBg">
		<div class="tree_d_box">
			<span class="sideFrame"></span>
			<span class="sideFrame"></span>
			<span class="sideFrame"></span>
			<span class="sideFrame"></span>
			<span class="sideFrame"></span>
			<span class="sideFrame"></span>
		</div>	
	</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;
	color:#fff;
}

.threeDBoxArea{
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative;
	transform-style: preserve-3d;
}

.cssCheckBg{
	position: absolute;
	left: 50%;
	top: 50%;
	margin:-500px 0 0 -500px;
	width: 1000px;
	height: 1000px;
	border-radius: 50%;
	background-image: 
	linear-gradient(45deg, rgba(0,0,0,0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.8)), 
	linear-gradient(-45deg, rgba(0,0,0,0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.8)),
	radial-gradient(circle, #00f, transparent );
	background-size:100px 100px,100px 100px,100% 100%;
	transform: perspective(1000px) translateZ(-250px) rotateX(70deg) ;
	transform-style: preserve-3d;
	animation:cssCheckBgRotate 120s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes cssCheckBgRotate {
	from{
		transform:perspective(1000px) translateZ(-250px) rotateX(70deg) rotate(0deg);
	}
	to{
		transform:perspective(1000px) translateZ(-250px) rotateX(70deg) rotate(360deg);
	}

}

.tree_d_box{
	width: 250px;
	height: 250px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin:-125px 0 0 -125px;
	transform:  translateZ(126px);
	transform-style: preserve-3d;
}
.sideFrame{
	width: 100%;
	height: 100%;
	position: absolute;
	border:10px solid rgba(0,0,255,0.7);
	display: block;
	background: rgba(0,0,255,0.3);
	background-size: cover;
	opacity: 1
}
.sideFrame:nth-child(1){
	transform: translateZ(125px);
	background:transparent;
}
.sideFrame:nth-child(2){
	transform: rotateY(180deg)  translateZ(125px);
}
.sideFrame:nth-child(3){
	transform: rotateY(-90deg) translateX(-125px);
	transform-origin: left;
}
.sideFrame:nth-child(4){
	transform: rotateY(90deg) translateX(125px);
	transform-origin: right;
}
.sideFrame:nth-child(5){
	transform: rotateX(-90deg) translateZ(-125px);
}
.sideFrame:nth-child(6){
	transform: rotateX(-90deg) translateZ(125px);
}