Home > Article > Web Front-end > How to use css transform attribute
css transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element. The syntax is transform: none|transform-functions.
#How to use the css transform attribute?
Function: The transform attribute applies 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.
Syntax:
transform: none|transform-functions
Description:
● none Definition is not converted.
● matrix(n,n,n,n,n,n) Define 2D transformation, using a matrix of six values.
● matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define 3D transformation, using 16 values 4x4 matrix.
● translate(x,y) Define 2D transformation.
● translate3d(x,y,z) Define 3D transformation.
● translateX(x) Define the transformation, just using the X-axis value.
● translateY(y) Define the transformation, just using the value of the Y axis.
● translateZ(z) Define 3D transformation, just using the value of the Z axis.
● scale(x,y) Defines 2D scaling transformation.
● scale3d(x,y,z) Define 3D scaling transformation.
● scaleX(x) Defines the scaling transformation by setting the value of the X axis.
● scaleY(y) Define the scaling transformation by setting the value of the Y axis.
● scaleZ(z) Defines the 3D scaling transformation by setting the value of the Z axis.
● rotate(angle) Define 2D rotation, specify the angle in the parameter.
● rotate3d(x,y,z,angle) Define 3D rotation.
● rotateX(angle) Defines a 3D rotation along the X-axis.
● rotateY(angle) Defines 3D rotation along the Y axis.
● rotateZ(angle) Defines 3D rotation along the Z axis.
● skew(x-angle,y-angle) Defines a 2D skew transformation along the X and Y axes.
● skewX(angle) Defines the 2D skew transformation along the X-axis.
● skewY(angle) Defines the 2D skew transformation along the Y axis.
● perspective(n) Defines the perspective view for the 3D transformation element.
Note:
Internet Explorer 10, Firefox, and Opera support the transform attribute.
Internet Explorer 9 supports an alternative -ms-transform property (for 2D transforms only).
Safari and Chrome support alternative -webkit-transform properties (3D and 2D transforms).
Opera only supports 2D conversion.
css transform attribute usage example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Effect output:
The above is the detailed content of How to use css transform attribute. For more information, please follow other related articles on the PHP Chinese website!