CSS 3: A series of animated attributes-specific scale-out and css3scale

CSS 3: A series of animated attributes-specific scale-out and css3scale

Next we start from3Introduction:

 

1,Scale (x, y)PerformZoom

 

• X indicatesHorizontal DirectionScaling multiple | Y indicatesVerticalZooming multiple

• Y isOptional ParameterIf not set, it indicatesThe zooming multiples of X and Y are the same.. AndSubject to X.

Css code

1. Transform: scale (2, 2.5 );

2, ScaleX (<number>)The element is scaled only on the X axis (horizontal direction.

• The default value is 1, which is the same as the base point in the center of the element. You can use transform-origin to change the base point.

Css code

1. Transform: scaleX (2 );

3, ScaleY (<number>)The element is scaled only in the Y axis (vertical direction.

• The base point is in the center of the element. You can use transform-origin to change the base point.

Css code

1. Transform: scaleY (2 );

Finally, let's take a look. Compatibility: Css code

1. . Test {
2. -Moz-transform: scale (2, 2 );
3. -Webkit-transform: scale (2, 2 );
4. -O-transform: scale (2, 2 );
5. Background: url (img/I .png) no-repeat;
6. Width: 198px;
7. Height: 133px;
8. }