CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS position attribute CSS3 perspective Attribute

CSS3 perspective-Usage and examples of origin attribute

perspective-Definition of origin attribute 3The X-axis and Y-axis based on the D element. This attribute allows you to change 3The bottom position of the D element. Defines the perspective when-Origin attribute, which is a child element of the element, perspective, rather than the element itself.

The following table provides usage instructions and version history of this attribute, as well as the syntax used in JavaScript scripts.

Default value:	50P%
Applies to:	Transformable elements
Inheritance:	None
Animated:	Yes.Please refer to Animation properties.
Version:	CSS3New feature
JavaScript syntax:	object.style.perspectiveOrigin="20%"

Perspective-The usage syntax of origin

The syntax of this attribute is as follows:

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

Note:If only for perspective-The origin attribute specifies a value, then the second value is assumed to be the center, equal to50% value.

The following example demonstrates how to use perspective-origin Attribute.

Example

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

Test to see‹/›

Note:If at least one of the two values is not a keyword, the first value represents the horizontal position (or offset) of the origin of the perspective, and the second value represents the vertical position (or offset) of the origin of the perspective.

Attribute Values

The following table describes the values of this attribute.

Value	Description
x-axis	It represents the horizontal position (or offset) of the origin of the perspective. It can have one of the following values: percentage -It defines the offset amount relative to the width of the element. length -It defines the offset amount of the length value used. left -equals 0% or zero width. center -equals the width of the box.50% or half. right -equals100% or the entire width of the box.
y-axis	It represents the vertical position (or offset) of the origin of the perspective. It can have one of the following values: percentage -It defines the offset amount relative to the height of the element. length -It defines the offset amount of the length value used. top -equals 0% or zero height. center -equals the height of the box.50% or half. bottom -equals100% or the entire height of the box.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the perspective of their parent element.-The Attribute Values of origin.

Browser Compatibility

perspective-Browser Compatibility of the origin Attribute, the numbers in the following table indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 10+ ^-moz-,16 + Google Chrome 12+ ^-webkit-,36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-,23+