Starting with 3D Cube Animation

Lecture 90:- Starting with 3D Cube Animation

A 3D cube animation can be created using CSS transforms and transitions. The CSS transforms are used to rotate the cube in 3D space, while the transitions are used to smoothly change the state of the cube from one state to another.

Here's an example of how to create a 3D cube animation:

cssCopy code

<div class="cube">  <div class="face front">Front</div>  <div class="face back">Back</div>  <div class="face left">Left</div>  <div class="face right">Right</div>  <div class="face top">Top</div>  <div class="face bottom">Bottom</div> </div> .cube {  width: 200px;  height: 200px;  perspective: 1000px; } .face {  width: 100%;  height: 100%;  position: absolute;  text-align: center;  font-size: 36px;  color: white; } .front {  transform: translateZ(100px);  background-color: red; } .back {  transform: rotateY(180deg) translateZ(100px);  background-color: blue; } .left {  transform: rotateY(-90deg) translateZ(100px);  background-color: green; } .right {  transform: rotateY(90deg) translateZ(100px);  background-color: yellow; } .top {  transform: rotateX(90deg) translateZ(100px);  background-color: pink; } .bottom {  transform: rotateX(-90deg) translateZ(100px);  background-color: orange; }

In this example, a cube is created using a container div and six divs representing the six faces of the cube. The faces are positioned using absolute positioning and the CSS transforms are used to rotate the faces in 3D space. The background color of each face is set to a different color to help distinguish the different faces of the cube.

You can add animations to the cube by adding transition properties to the cube class or to the individual face classes. For example, you can add a transition to the cube to smoothly change the state of the cube when it's clicked:

cssCopy code

.cube {  transition: transform 0.5s; } .cube:hover {  transform: rotateY(45deg); }

In this example, the cube will rotate smoothly by 45 degrees when the mouse hovers over it, thanks to the transition property.