CSS3 3D Transforms | Perspective

Perspective defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.

When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

#div16 {
    height: 200px;
    width: 200px;
    border: 2px solid red;
    perspective: 100px;
#div17 {
    height: 200px;
    width: 200px;
    position: absolute;
    background-color: orange;
    color: black;
    border: 1px solid white;
#div17:hover {
    transform: rotateX(45deg);

The perspective property only affects 3D transformed elements.

Here is the result:


Leave a Reply