Transform rotate
TRANSFORM ROTATE MAC OS X
Where angle is an angle represented by deg, rad or grad units. Syntax: -webkit-transform: rotateY( angle) Rotates the element clockwise around the y-axis. The rotateX() transform function is available on the following: Syntax: -webkit-transform: rotateX( angle) Rotates the element clockwise around the x-axis. The rotate3d() transform function is available on the following: angle is an angle represented by deg, rad or grad units.x, y, z represents the direction vector for the rotation.Syntax: -webkit-transform: rotate3d(x, y, z, angle) The rotate() transform function is available on the following: Syntax: -webkit-transform: rotate( angle) Specifies a 2D rotation clockwise around the element's origin. The perspective() transform function is available on the following: Therefore, a smaller value would increase the "perspective" effect (due to the object appearing closer), while a larger value will reduce the effect (due to the element appearing further away). This function allows you to change the perspective of an element by changing the distance of the element to the viewer. Where depth equals the distance, in pixels, of the z=0 plane from the viewer. Syntax: -webkit-transform: perspective( depth) Specifies a perspective projection matrix.
TRANSFORM ROTATE MAC OS X
Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
The matrix3d() transform function is available on the following: The parameters represent a 4x4 homogeneous matrix of 16 values in column-major order: 0,0 Specifies a 3D transformation as a 4 x 4 matrix. The matrix() transform function is available on the following: The parameters tX, tY represent the x and y translation elements.Įxample: -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0) The parameters m11, m12, m21, m22 represent the elements of a 2x2 matrix in column-major order: 1,1 Syntax: -webkit-transform: matrix(m11, m12, m21, m22, tX, tY) Specifies a 2D transformation in the form of a transformation matrix of six values. Here is a list of transform functions that you can use with the -webkit-transform property. transform function One or more of the transform functions below. Here are the accepted values for the -webkit-transform property: none Specifies that no transforms should be applied to the element. Transform: rotate(45deg) /* CSS3 */ Accepted Values ms-transform: rotate(45deg) /* Internet Explorer */ moz-transform: rotate(45deg) /* Mozilla */ webkit-transform: rotate(45deg) /* WebKit */ The syntax for the -webkit-transform property is: In other words, use the transform property unless you have a specific reason not to. Unless you need to support a really old browser, there's no need to use the -webkit- extension. Most major browsers now support the official CSS3 transform property. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.Īlthough the -webkit-transform property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome. The CSS -webkit-transform property is a proprietary CSS extension that is supported by the WebKit browser engine. These transform functions have names such as scale(), rotate(), skew(), etc, which accept parameters to determine the level of transformation (for example, the angle to rotate an element). The -webkit-transform property accepts a list of "transform functions" as values.
