Welcome friends,
In this article I have made a 3d cube animation using only HTML and CSS. HTML and CSS code given below seperately.
HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>Pure
CSS animated cube</title>
</head>
<body>
<div
class="cube">
<span
class="up"></span>
<span
class="front"></span>
<span
class="down"></span>
<span
class="back"></span>
<span
class="left"></span>
<span
class="right"></span>
<!--six
span tag for six surface of cube-->
</div>
</body>
</html>
|
CSS code:-
body
{
background:#abddfd;
justify-content:
center;
align-items:
center;
display: flex;
height: 90vh;
}
.cube
{
align-items:
center;
justify-content:
center;
height: 100px;
width: 100px;
position: fixed;
transform-style:
preserve-3d;
transform:perspective(500px)
rotateZ(45deg) rotateY(60deg);
animation:
animate 10s infinite;
}
@keyframes animate
{
10%
{
transform:
rotateX(20deg);
}
30%
{
transform:
rotateX(180deg);
}
40%
{
transform:
rotateX(360deg);
}
50%
{
transform:
rotateZ(210deg);
}
70%
{
transform:
rotateY(40deg);
}
90%
{
transform:
rotateX(250deg);
}
}
.up
{
background:pink;
height: 100px;
width: 100px;
display: block;
transform-origin:
bottom;
transform:rotateX(90deg);
}
.front
{
background:green;
height: 100px;
width: 100px;
display: block;
}
.down
{
background:red;
height: 100px;
width: 100px;
display: block;
transform-origin:
top;
transform:rotateX(-90deg);
}
.back
{
background:yellow;
height: 100px;
width: 100px;
display: block;
transform:translateY(-200px)
translateZ(-100px);
}
.left
{
background:gray;
height: 100px;
width: 100px;
display: block;
transform-origin:
right;
transform:rotateY(-90deg)
translateY(-300px);
}
.right
{
background:blue;
height: 100px;
width: 100px;
display: block;
transform-origin:
left;
transform:rotateY(90deg)
translateY(-400px);
}
|
0 Comments