3D transformations in CSS allow you to manipulate elements in three-dimensional space In this section, we will learn how to use some of the properties we talked about in the previous section but in a 3D environment.

The major difference between 2D and 3D environments is the z-axis. In 2D environments, we have the x-axis, which is horizontal, and the y-axis, which is vertical. But in 3D, we also have the z-axis, which is perpendicular to both of them.

In order to create a 3D environment on a 2D plane, like the screen of our computer, we need to create something called perspective. You can think of perspective as the distance between our eyes and the computer screen.

every time we want to create a 3D environment, we have to add perspective to the element container first. And the perspective is the distance between the viewer and the screen.

 Now, let's experiment with perspective. Let's take an example:

<div class="container">
        <div class="move" id="ease">simple demo</div>
     
    </div>

.container{
perspective: 100px;
    max-width:90rem;
    padding: 2rem;
    margin: 5rem auto;
    display: block;
    }
    .move{
        font-size: 1rem;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        background-color: green;
        color: #fff;
        width: 15rem;
        height: 5rem;
        margin-bottom: 2rem;
        text-align: center;
        border-radius: .5rem;
        transition:transform .5s linear .5s ,font-size .5s linear .5s;
    }
    .move:hover{
        transform:translateZ(-4rem); 
        font-size: 32px;
           
    }

 Run the code and see if something interesting is happening here. The image is kind of getting smaller. The width and height are decreasing, just like what happened when we used the Scale property in the previous section. But actually, that is not what's happening here. What's really happening is the image is moving away from us. but its width and height haven't changed.

 So now you can think of the z-axis as the line drawn between two points. The first is our eyes, and the second is the screen. When we move the element along the z-axis, it will move along this line and either get closer to or move away from our eyes.

 we will learn how to rotate elements inside a 3D environment using the Transform Rotate function.

.container{
perspective: 100px;
    max-width:90rem;
    padding: 2rem;
    margin: 5rem auto;
    display: block;
    }
    .move{
        font-size: 1rem;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        background-color: green;
        color: #fff;
        width: 15rem;
        height: 5rem;
        margin-bottom: 2rem;
        text-align: center;
        border-radius: .5rem;
        transition:transform .5s linear .5s ,font-size .5s linear .5s;
    }
    .move:hover{
        transform:translateZ(-4rem);
      /*  transform:translateZ(4rem); */
      
             /* for raoate   */
/*    transform: rotateZ(45deg); */

      font-size: 32px;
    }

Now let's start using the rotate function. RotateZ is actually similar to Rotate in 2D transform but in the Z-axis.

See full code: codepen