Create 3d Rotating Cube with Images

  • Share this:
Create 3d Rotating Cube with Images

Today we will discuss how to create a 3D rotating cube with only HTML,CSS. First we have to write the following HTML codes..

 

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>3d cube</title>
	<link rel="stylesheet" href="3dcube.css">
</head>
<body style="background-color: springgreen; margin-top: 200px; ">
	<div class="rotating-box">
		<div class="single-rb">
			<div class="front-side">
				<img src="picture/Rimon 9.jpg"/>
			</div>
			<div class="back-side">
			    <img src="picture/IMG_20171127_170328.jpg"/>
			</div>
			<div class="left-side">
				<img src="picture/10696183_1486305171644505_826715884550453840_n.jpg"/>
			</div>
			<div class="right-side">
				<img src="picture/1897959_1640361026238918_8868421644982358446_n.jpg"/>
			</div>
			<div class="top-side">
				<img src="picture/IMG_20180524_012106.jpg"/>
			</div>
			<div class="bottom-side">
				<img src="picture/IMG_20180616_100311.jpg"/>
			</div>
		</div>
	</div>
</body>
</html>

Then , we have to write the following CSS codes..

 

.rotating-box{
	height:400px;
	width:400px;
	perspective:800px;
	margin:10px auto;
}
.single-rb{
	width:400px;
	animation:rotate 60s linear infinite;
	transform-style:preserve-3d;
	margin-top:100px;
}
.single-rb img{
	height:400px;
	width:400px;
}
.single-rb div{
	position:absolute;
	height:400px;
	width:400px;
}
.front-side{
	transform:translateZ(200px);
}
.back-side{
	transform:rotateY(180deg)
	translateZ(200px);
}
.left-side{
	transform:rotateY(-90deg)
	translateX(-200px);
	transform-origin:left;
}
.right-side{
	transform:rotateY(90deg)
	translateX(200px);
	transform-origin:right;
}
.top-side{
	transform:rotateX(-90deg)
	translateY(-200px);
	transform-origin:top;
}
.bottom-side{
	transform:rotateX(90deg)
	translateY(200px);
	transform-origin:bottom;
}
@keyframes rotate{
	0%{transform:rotateY(0);}
	100%{transform:rotateY(360deg);}
}

Remember ,

After writing the codes, you need to link the images correctly

About author
Hi,I am Rimon Nahid.I am a PHP,Laravel,Mysql expert with over years of experience .I have developed many project by PHP, Laravel.My first strategy would be to complete the work within the deadline and achieve client satisfaction by meeting quality aspects .Client satisfaction is my success.