Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page"..
Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice 3D cube image using HTML5 and CSS3.First of all we need to create a index.html and style.css file.after creating those file we need to open it in our editor and follow this coding instruction..
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Cube Image</title>
<link rel="stylesheet" href="3dcube.css">
</head>
<body>
<div class="rotating-box">
<div class="single-rb">
<div class="front-side">
<img src="picture/img1.jpg"/>
</div>
<div class="back-side">
<img src="picture/img2.jpg"/>
</div>
<div class="left-side">
<img src="picture/img3.jpg"/>
</div>
<div class="right-side">
<img src="picture/img4.jpg"/>
</div>
<div class="top-side">
<img src="picture/img5.jpg"/>
</div>
<div class="bottom-side">
<img src="picture/img6.jpg"/>
</div>
</div>
</div>
</body>
</html>
style.css
body{
background: #37B9E9;
}
.rotating-box{
height:400px;
width:400px;
perspective:800px;
margin:10px auto;
margin-top:200px;
}
.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);}
}
0 Comments Here
Authentication required
You must log in to post a comment.
Log in