CSS3 3D Transformation

CSS3 3D Transforms

3D Transforms

CSS3 allows you to use 3D transforms to format elements.

In this chapter, you will learn some of these 3D transformation methods:

rotateX()
rotateY( )

rotateX() method

rotateX() method, rotates the The element to be rotated along the X-axis.

Example

    php中文网(php.cn)  
  PHP.CN
 HELLO

Run the program and try it

rotateY() method

rotateY() method, rotates an element around its Y-axis by a given degree.

    php中文网(php.cn)  
  Hello
 Hello.

Run the program and try it

Conversion attributes

The following table lists all conversion attributes:

3D Conversion Method

##Properties Description CSS transform Apply a 2D or 3D transform to an element. 3 transform-origin Allows you to change the position of the element being transformed. 3 transform-style Specifies how nested elements are displayed in 3D space. 3 perspective Specifies the perspective effect of 3D elements. 3 perspective-origin Specifies the bottom position of the 3D element. 3 backface-visibility Defines whether the element is visible when not facing the screen. 3

# #Function Description ##matrix3d( n translate3d( x translateX( x translateY( y translateZ( z scale3d( x scaleX( x scaleY( y scaleZ( z rotate3d( x rotateX( angle rotateY( angle rotateZ( angle perspective( n


,n,n,n,n,n,n ,n,n,n,n,n,n,n,n,n)Define the 3D transformation, using a 4x4 matrix of 16 values.
,y,z)Define 3D transformation.
)Define a 3D translation, using only the values used for the X-axis.
)Define a 3D translation, using only the values used for the Y axis.
)Define a 3D translation, using only the value used for the Z axis.
,y,z)Define the 3D scaling transformation.
)Defines a 3D scaling transformation, given an X-axis value.
)Define the 3D scaling transformation by giving a Y-axis value.
)Defines a 3D scaling transformation, given a Z-axis value.
,y,z,angle)Define 3D rotation.
)Defines a 3D rotation along the X-axis.
)Defines a 3D rotation along the Y axis.
)Defines a 3D rotation along the Z axis.
)Defines the perspective view of a 3D transformed element.