
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.
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). Skew the objects on their horizontal (X) or vertical (Y) axle.The -webkit-transform property accepts a list of "transform functions" as values. The X value horizontally while Y vertically when there rotate attribute is zero. Translate shifts the element with pixels related to its original position. Set any positive or negative value or even decimals.
Turning with 180° puts the object upside down while 360° takes is back to its original upright position. Rotate the element clockwise with the second property that's set in degrees. This means that 0.5 halves while 2 doubles the section. The default scale value is 1, which works as a multiplier of the original size. Scale works like you would zoom in and out the targeted element. In this situation you will have to refresh the page.
Set the scale, rotate, translate, and skew and watch the live preview to get the desired view.Īvoid setting extreme values for the skew property because the preview might cover the settings panel. Use the sliders to set the transform CSS properties for your stylesheet.