How to use css transform attribute-Front-end Q&A-php.cn

How to use css transform attribute

藏色散人

Release： 2019-05-30 09:31:01

Original

3921 people have browsed it

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 css transform attribute

#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

Copy after login

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>

Copy after login

Effect output:

How to use css transform attribute

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!