perspective
This page has been flagged with the following issues:
High-level issues:
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
- CSS Transforms Module, Level 3, Section 13.2
See also
Related articles
Transforms
- css/functions/perspective
Related pages (MSDN)
Transform FunctionsMathematical Description of Transform FunctionsDirect3D: MatricesHands On: 3-D Transforms
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here