3D Animation using CSS

admin | Posted on May 9, 2021 |

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. In this example i can use images , you can use any thing (For ex. Simple text, gif)

<!DOCTYPE html>
<html>
<head>
<title>3D Animation</title>
<style>
#experiment {
min-height: 1000px;
}

.cube {
position: absolute;
left: 5%;
top: 175px;
}

.cube p {
line-height: 14px;
font-size: 12px;
}

.cube h2 {
font-weight: bold;
}

.cube.two {
top: 416px;
left: 50%;
margin-left: -200px;
}

.cube.three {
top: 532px;
left: 50%;
margin-left: -400px;
}

.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}

.rightFace,
.leftFace,
.topFace {
position: absolute;
}

.cube:hover .rightFace,
.cube:hover .leftFace,
.cube:hover .topFace div {
background-color: #ffc;
}

.cube:hover .rightFace:hover,
.cube:hover .leftFace:hover,
.cube:hover .topFace:hover div {
background-color: #ffa;
}

.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-ms-transform: skew(0deg, 30deg);
transform: skew(0deg, 30deg);
background-color: #ccc;
}

.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
}

.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
-ms-transform: skew(0deg, -30deg) scale(1, 1.16);
transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
}

.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
top: -158px;
left: 100px;
}

.cube {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
-ms-transition: -ms-transform 1s linear;
transition: transform 1s linear;
}

.cube:hover {
-webkit-transform: translate(202px, 115px);
-moz-transform: translate(202px, 115px);
-o-transform: translate(202px, 115px);
-ms-transform: translate(202px, 115px);
transform: translate(202px, 115px);
}
</style>
</head>
<body>
<div class="cube">
<div class="topFace">
<div>
<b><u>Nature :</u></b><br>
Trees provide us with many benefits necessary for survival, including clean air, filtered water, shade, and food. They also give us hope and insight, and courage to persevere – even in the harshest conditions. Trees teach us to stay rooted while soaring to great heights. 
</div>
</div>
<div class="leftFace"> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBW6oEUyaOiBBhIpwDDdQGmgfTwScSJ4U3H1rvzQQU6ODF9JnsZw" width="180px" height="180px" >
</div>
<div class="rightFace">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3eU_vO9V-AAYAz44E0qIRaDf0NOwp65WoIzFTE2cY4wvTch8EnA" width="180px" height="180px">

</div>
</div>
</body>
</html>

Leave a Reply Cancel reply