Hello Reader's!
Today I am going to explain you about a spinning 3d pyramid, first thing comes to mind that what is this pyramid and how this is built so basically a pyramid is a polyhedron for which the base is a polygon and all lateral faces are treated a triangle. These two faces are congruent to each other i.e they have same shape and size. Now come to the point that how it is spinning, so this is spinning as we have used perspective property which defines the pixels in a 3D element and its child element will acquire this perspective property not the element itself. This is just used only for the 3D tranformation.
Syntax for using perspective property:-
-webkit-transform: perspective(600);
or
-webkit-perspective: 600;
The @keyframes property is also used here for specifing the animation code. Using same name as with the animation property and getting results of transform property on x and y axis.
Below is the complete source code that will help the user to understand the whole code easily.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
perspective: 300px;
perspective-origin: 50% 40%;
}
.side {
position: absolute;
left: 140px;
top: 150px;
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 140px solid #ccc;
transform-origin: 50% 0%;
animation: spin 5s infinite linear;
}
.back {
animation-delay: -2.5s;
}
.right {
animation-delay: -1.25s;
}
.left {
animation-delay: -3.75s;
}
@keyframes spin {
0% {
transform: rotateY(0deg) rotateX(30deg);
border-bottom-color: #1abcff;
}
25% {
transform: rotateY(90deg) rotateX(30deg);
border-bottom-color: #00a2e6;
opacity: 1;
}
74.9% {
opacity: 0;
}
75% {
transform: rotateY(270deg) rotateX(30deg);
border-bottom-color: #007eb3;
opacity: 1;
}
100% {
transform: rotateY(360deg) rotateX(30deg);
border-bottom-color: #1abcff;
}
}
.shadow {
position: absolute;
top: 340px;
left: 175px;
width: 50px;
height: 50px;
background-color: #bbb;
box-shadow: 0 0 40px 40px #bbb;
animation: shadow 5s infinite linear;
}
@keyframes shadow {
0% {
transform: rotateX(90deg) rotateZ(0deg);
}
100% {
transform: rotateX(90deg) rotateZ(-360deg);
}
}
.container span{
color: #fff;
font-size: 25px;
left: -29px;
position: absolute;
right: -12px;
top: 65px;
}
</style>
</head>
<body>
<div class="container">
<div class="side left"><span> left</span></div>
<div class="side front"> <span> front</span></div>
<div class="side right"> <span> right</span></div>
<div class="side back"><span> back</span></div>
<div class="shadow"></div>
</div>
</body>
</html>
Output:-
Download this file for getting the output of the code.
0 Comment(s)