Search within TutorialsPark

CSS3 perspective Property


To create a viewpoint from where the user can view 3D object


Definition and Notes.

1. The CSS3 perspective property is used to create an artificial viewpoint from where an user views the 3D object. Inorder to create an illusion of depth

2. The depth is denoted using a length value in pixels(distance away from the element's origin along the z-axis) or by setting the value to none(default).

3. A sister property of perspective is perspective-origin , it defines the origin from where the transform is seen


Syntax:

CSS3 perspective property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- It basically distorts the image, making things nearer to user appear larger and that away from him appear shorter in size.

Property Values

Value Description
none To denote that no perspective transform will be applied
length To set the distance of the user from the element.

Specifications

Specs Value
Name perspective
Value none | <number>
Initial Value none
Applies to Block-level and inline elements
Javascript syntax object.style.perspective="100px"
Inherited No
Computed Value Same as declared Value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.