How to use the transform attribute in CSS3
This article mainly introduces how to use the transform attribute in CSS3. It has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.
Syntax: none| []* The initial value is none.
Transform-function values:
matrix(): Defines the matrix transformation.
translate(): Move the element object.
scale(): Scales the element object.
rotate(): Rotate the element object.
skew(): Skews the element object.
For example (compatible browsers):
The rotate () function: transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
scale () function: transform: scale(2);-o-transform: scale (2);-moz-transform: scale(2);-webkit-transform: scale(2);
Scale animation effects are different when passing different parameter values for scale. Scale(1,2) means that the width remains the same and the height doubles. Scale(1,-2) means that the width remains the same, but the height doubles and rotates 180 degrees.
Translate () function: transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px); Parameters can be negative pixel values.
The skew () function: transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg); changes the shape of an element, while the rotate function does not change the shape of an element.
The matrix () function: transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0); Parameters are 6 values.
Thank you for reading this article carefully. I hope the article "How to use the transform attribute in CSS3" shared by Xiaobian will be helpful to everyone. At the same time, I hope you will support it a lot. Pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!
