Create HTML file as given here :
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/primary.css">
</head>
<body>
<section class="container">
<div id="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>
</body>
</html>
Create CSS file As given here:
.container{
width: 200px;
height:200px;
position: relative;
-webkit-perspective:1000px;
}
#cube{
width: 100%;
height: 100%;
display: block;
position: absolute;
-webkit-transform-stlye:preserve-3d;
}
#cube figure{
width:196px;
height:196px;
display: block;
position: absolute;
border: 2px solid #000;
}
#cube .front{
background: red;
-webkit-transform: rotateY(0deg) translateZ(100px);
}
#cube .back{
background: green;
-webkit-transform: rotateY(180deg) translateZ(100px);
}
#cube .right{
background: blue;
-webkit-transform: rotateY(90deg) translateZ(100px);
}
#cube .left{
background: yellow;
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
#cube .top{
background: brown;
-webkit-transform: rotateX(90deg) translateZ(100px);
}
#cube .bottom{
background: brown;
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
NOTE: output attached, see image
0 comments:
Post a Comment