In this article, we are going to learn to make 3D Cube using HTML and CSS and then rotate it using css transform property.
Full Source Code :
<html>
<head>
<style type="text/css">
.stage{
margin:0 auto;
}
@-webkit-keyframes spincube {
from,
to {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-webkit-transform: rotateY(-90deg);
}
33% {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-webkit-transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-webkit-transform: rotateX(90deg);
}
}
@keyframes spincube {
from,
to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
.cubespinner div {
position: absolute;
width: 250px;
height: 250px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
font-size: 100px;
}
.cubespinner .face1 {
-webkit-transform: translateZ(125px);
-moz-transform: translateZ(125px);
-ms-transform: translateZ(125px);
transform: translateZ(125px);
}
.cubespinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(125px);
-moz-transform: rotateY(90deg) translateZ(125px);
-ms-transform: rotateY(90deg) translateZ(125px);
transform: rotateY(90deg) translateZ(125px);
}
.cubespinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
}
.cubespinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
}
.cubespinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
}
.cubespinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(125px);
-moz-transform: rotateX(-90deg) translateZ(125px);
-ms-transform: rotateX(-90deg) translateZ(125px);
transform: rotateX(-90deg) translateZ(125px);
}
</style>
</head>
<body style="margin: 10em;">
<div class="stage" style="width: 250px; height: 250px;">
<div class="cubespinner">
<div class="face1">
Face 1
</div>
<div class="face2">
Face 2
</div>
<div class="face3">
Face 3
</div>
<div class="face4">
Face 4
</div>
<div class="face5">
Face 5
</div>
<div class="face6">
Face 6
</div>
</div>
</div>
</body>
</html>
Follow this video for complete guidance :
