Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.