Perspective

The perspective css property enables 3d positioning on an element. It ultimately determines the distance between the user and the z = 0 plane, where lower perspective gives larger transforms and smaller perspective values give smaller ones.

There are 2 ways to handle perspective, the first is with the perspective property, and the second is with the transform property with perspective() as a function.

    
        
.perspective-parent {
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    perspective: 300px ;
}

.perspective-child {
    transform: translate3d(0px, 0px, -100px);
}

    

Perspective Transform Function

The perspective transform function is an easy and quick way to transform a single element. However, it will maintain its own vanishing point. This means that the 3d effect is independent from other elements, even if they have the same perspective.

Perspective Property

The perspective property will affect all children inside, allowing them to maintain the same vanishing point.

Vanishing Point (Origin)

The perspective-origin property can define a vanishing point on our container. Its default value is centered horizontally and vertically at 50% 50%.

    
        
.perspective-parent {
    transform-style: preserve-3d;
    perspective-origin: 50% 50%
    perspective: 300px ;
}

.perspective-child {
    transform: translate3d(0px, 0px, -100px);
}

    

Child Transformations

We can perform several transformations on child components within a parent container with a perspective. The main transformations you might do on a child would be increasing/decreasing scale, rotating on an axis, or translating its position within the perspective container.

    
        
.perspective-parent {
    transform-style: preserve-3d;
    perspective-origin: 50% 50%
    perspective: 300px ;
}

.perspective-child {
    transform:  
}

    

Preserve 3D

We can preserve 3d perspective into grandchildren elements on a container by using the transform-style: preserve-3d;. Here we can see the lower left container does not preserve the 3d space into its children, while the upper right container does.

    
        
.parent {
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
    perspective: 600px;
    transform: rotateX(0) rotateY(0) rotateZ(0);
}
.parent[data-toggle="true"] {
    transform-style: preserve-3d;
    transform: rotateX(70deg) rotateY(-10deg) rotateZ(50deg);
    .child {
        transform: translateZ(40px);
    }

    .child[data-3d="true"] {
        transform-style: preserve-3d;
    }

    .grandchild {
        transform-style: preserve-3d;
        transform: translateZ(30px);
    }
}

.child {
    /* NOTE NO PRESERVE 3D TRANSFORM,
    SO THE GRANDCHILDREN WILL NOT
    RENDER WITH 3D EFFECTS */
    transition: transform 0.4s ease;
    transform: translateZ(0);
}
.grandchild {
    transition: transform 0.4s ease;
    transform: translateZ(0);
}