Hello reader's. I have created a 3D spinning cubes using CSS3 by simply using the transform,animation and transition property over the elements.
In my example, I have taken a cube element comprising of each face of the cube having its own elements such as front, back, top, bottom, left, right. I have also tried to change the direction of the spinning cube to vertical using the CSS3 properties.
Below is the html code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Spinning Cube</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- =container start= -->
<div class="container">
<!-- =section block start= -->
<div class="section" style="text-align:center;">
<h1 >Spinning Cube Using CSS3</h1>
<!-- =cube section start= -->
<div class="cube" style="margin:auto;">
<div class="front">Front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div><!-- =cube section end// -->
</div><!-- = section block end// -->
<!-- =vertical-spin block start= -->
<div class="vertical-spin" style="text-align:center;">
<h2>Vertical spinning cube</h2>
<!-- =cube section start= -->
<div class="cube" style="margin:auto;">
<div class="front">Front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div><!-- =cube section end// -->
</div><!-- =vertical-spin block end// -->
</div><!-- =container end// -->
</body>
</html>
In the CSS, I have used perspective and perspective-origin property of CSS. This property allow us to change the perspective of the 3D element so that how it can be viewed while the perspective-origin property allow us change the 3D elements bottom position.
I have set the cube position and had used transform-style: preserve-3d so that to keep the element 3D.I have also used @keyframe rules for specifying the animated code to the particular element which needs the animation. With the spinner property, the cube will spin by setting the properties in the @keyframe for the particular elements that are to be animate.
For the cube to spin vertically, I need to set the rotataion of the faces of the cube using the rotate, transform and translate property.
Below is the CSS code:-
/*Cube elements start*/
.section{
perspective: 800px;
perspective-origin: 50% 100px;
margin-top: 40px;
}
.cube{
position: relative;
width: 200px;
transform-style: preserve-3d;
padding-top: 40px;
animation: cube-spin 5s infinite linear;
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
@keyframes cube-spin{
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
/*Vertical spin block start */
.vertical-spin{
margin-top: 268px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.vertical-spin .cube{
transform-origin:0 100px;
position: relative;
width: 200px;
transform-style: preserve-3d;
animation: spin-vertical 5s infinite linear;
}
.vertical-spin .cube div{
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
.vertical-spin.cube {
margin: 0 auto; /* keeps the cube centered */
transform-origin: 0 100px;
animation: spin-vertical 5s infinite linear;
}
.vertical-spin .top {
transform: rotateX(-270deg) translateY(-100px);
}
.vertical-spin .back {
transform: translateZ(-100px) rotateX(180deg);
}
.vertical-spin .bottom {
transform: rotateX(-90deg) translateY(100px);
}
Conclusion:
Hence, the 3D spinning cube is created by simply using the CSS3 properties.
Note:- The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .
0 Comment(s)