Hello Readers, Here is a blog on making a rotating cube. For this we will make an HTML page and a CSS page. First, make an HTML page named index.html and write the below code.
<html>
<head>
<title>Rotating Cube</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="upper">
<div class="spin-wrapper" >
<div class="cube-face1">
1
</div>
<div class="cube-face2">
2
</div>
<div class="cube-face3">
3
</div>
<div class="cube-face4">
4
</div>
<div class="cube-face5">
5
</div>
<div class="cube-face6">
6
</div>
</div>
</div>
</body>
</html>
Now we will make a CSS file named style.css and write the following code:
.upper
{
width: 150px;
height: 150px;
margin:auto;
margin-top:5%;
}
.spin-wrapper > div
{
font-size: 100px;
width: 150px;
height: 150px;
text-align: center;
position: absolute;
line-height: 150px;
border: 1px solid #fff;
background: rgba(0,0,0,0.8);
color:white;
box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
}
.spin-wrapper > .cube-face1
{
-moz-transform: translateZ(75px);
-webkit-transform: translateZ(75px);
-ms-transform: translateZ(75px);
transform: translateZ(75px);
}
.spin-wrapper > .cube-face2
{
-moz-transform: rotateY(90deg) translateZ(75px);
-webkit-transform: rotateY(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
}
.spin-wrapper > .cube-face3
{
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
transform: rotateY(90deg) rotateX(90deg) translateZ(75px);
}
.spin-wrapper > .cube-face4
{
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(75px);
}
.spin-wrapper > .cube-face5
{
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(75px);
}
.spin-wrapper > .cube-face6
{
-moz-transform: rotateX(-90deg) translateZ(75px);
-webkit-transform: rotateX(-90deg) translateZ(75px);
-ms-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
}
@-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);
}
}
.spin-wrapper
{
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 75px 75px 0;
-moz-transform-origin: 75px 75px 0;
-ms-transform-origin: 75px 75px 0;
transform-origin: 75px 75px 0;
}
Comment:
The @keyframes is used to specify the animation code. The animation is created by changing a set of CSS to another as many times.{ @-webkit-keyframes spincube {
from,to } specify when the style change will happen in percent, from is the beginning of the animation, to is the end of an animation.
Note:-The transform property supports all latest version of Safari 9+, Chrome 43+
, Firefox 16+, Opera 30+, and IE 10+.
0 Comment(s)