CSS perspective property

Description

CSS perspective property esatablishes a new stacking context and allows the 3-D transformation of children elements. Remember that it applies to the transform children elements and not the element itself.

In the demo, we apply 'perspective' property to the element. But its effect is visible on the children elements.

Syntax

perspective : none | length

Property values

noneDefault: In this case, no perspective is applied.; perspective: none;
Try it
length 300: It translates the box by 50px along Y-axis.; perspective: 300px;
Try it

Applicable to

It applies to transformable elements.

Preview

Code

CSS

.parentElement{
 perspective:300;
}

.element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateY(60deg);
}

HTML

<div class="parentElement">
<div class="element">
		We are learning perspective property.
	</div>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to