Application of css3--transform2d

Objective:

About CSS3, I think the most interesting thing is the 2D and 3D technology, which makes our web page instantly enriched, can let us do some cool and dazzling effects, such as Carousel. After a period of study, let me have a closer understanding of CSS3, in this warm so know new. Special thanks to Zhang Xin's technical blog.

In W3cschool, Transform:rotate () is found; Translate (23PX), except for elements such as matrix (n,n,n,n,n,n), are almost never used, since most of the properties are already available to meet our needs. In fact, all of the 2d,3d effect is to change the matrix () and get, if you master The Matrix () method, is to grasp the CSS3 in the heart of the cool hang-fried days effect.

In this statement, the following write code, do not add compatible browser properties, please add your own IE 9 (-ms-), Safari and Chrom (-webkit-), Opera (-o-), Firefox (-moz-);

1, displacement-translate (x, y)

Defines 2D transformations, moving elements along the x and Y axes, which can change the true coordinates of an element on the screen

The following general methods are used:

Div {  transform:translate (50px,100px);  /* or    Transform:translatex (50px);     */     }

Using matrices

Div {    transform:matrix (1,0,0,1,50,100);}

The first 4 values are fixed, the fifth one represents the value of the x-axis, and the sixth represents the value of the y-axis.

2, scaling-scale (x, y)

Defines the 2D transformation, changing the width and height of the element. is to zoom in and out of the element itself, but not to change the width and height of the element itself.

Div { transform: Scale(2.2,1); /* or Transform:scalex (2.2); Transform:scaley (1); */    }

Using matrices

Div {    transform:matrix (2.2,0,0,1,0,0);}

As you can see, scaling is the change of the first element and the fourth element.

　　

Application of css3--transform2d