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
(0)
Login first for like post.
Comments (0)