How to use the transform attribute in CSS3-CSS Tutorial-php.cn

Everyone knows the transformattribute of CSS3, because we often use it, so today I will give you a good analysis of how to use this transform, what is the transform? Usage and grammar.

Syntax: none| [ ]* The initial value is none.

transform-function

FunctionValue:

matrix(): Define matrix transformation.

translate(): Move element

object.

scale(): Scale element object.

rotate(): Rotate element object.

skew(): Skew element object.

For example (compatible with browsers):

1.rotate() function: transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.scale() function: transform: scale(2 );-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);

When passing different parameter values for scale, scaling

animationThe effects are different. scale(1,2) means that the width remains unchanged and the height becomes twice the original. scale(1,-2) means that the width remains unchanged, the height is doubled and rotated 180 degrees.

3.translate() function: transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform : translate(4px, 6px); The parameter can be a negative pixel value.

4.skew() function: transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);- webkit-transform: skew(30deg, -20deg); will change the shape of the element, but the rotate function will not change the shape of the element.

5.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); The parameters are 6 values.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!