perspective

< css‎ | functions(Redirected from css/functions/perspective())
Jump to: navigation, search

perspective

This article is Almost Ready.



Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.



Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
12
prefix
?
Unknown
10
Yes
15
prefix
?
prefix

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
3.0
prefix
10.0
prefix
16.0
Yes
8.1
Yes
?
prefix
?
prefix

Examples

The following code snippet is an example of the perspective function in use. When applied to a square blue div element along with the translateZ function (which enables the specified element to appear to have moved away from the viewer), it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {    
  transform: perspective(500px) translateZ(-60px);
}

Notes

Remarks

The value must be greater than 0 and is given in pixels. A perspective projection matrix with the parameter length is equivalent to the following transformation matrix: File:perspectivematrix.png For more information about transformation matrices, see Mathematical Description of Transform Functions, in the CSS3 Transforms specification. The perspective function is often necessary for other 3-D transformation functions to have a visible effect.

Syntax

perspective ( <length> )

Parameters

length
Value in pixels that specifies a perspective projection matrix. This value is expressed as a number followed by "px".

Standards information


See also

Related articles

Transforms






  • perspective

























Related pages (MSDN)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]