CSS3 transform attribute_html/css_WEB-ITnose

Some properties of CSS3 may be relatively new, and the translation time of some books from abroad to China will be delayed by 1-2 years. So there are some things that still need to be sorted out in time.

Let’s talk about an attribute of CSS3: transform

In fact, the literal meaning is very obvious, it means change, change.

What exactly is the change?

Transform can choose the following values:

1. Rotate-rotate (rotatex, rotatey)
2. Tilt-skew
3. Scale-scale
4. Mobile-translate

The examples given below may be very simple. For the real details, W3School is updated regularly

1.rotate

a.rotate{    -webkit-transform: rotate(10deg);    -ms-transform: rotate(10deg);    -o-transform: rotate(10deg);    transform: rotate(10deg);/*没有火狐的前缀，已经规范了*/}

transform

I don’t know if you know what 20deg means here. Everyone knows that deg means degree. Then 20deg is a positive rotation of 20 degrees. Of course, there is also a negative rotation. After all the above codes are changed to -10deg, it will look like this. Look below:

transform

It should be very clear. The default The center of rotation is the midpoint of the height and width of the rectangle

2.skew

a.skew{    -webkit-transform: skew(20deg);    -ms-transform: skew(20deg);    -o-transform: skew(20deg);    transform: skew(20deg);/*没有火狐的前缀，已经规范了*/}

transform

What is the concept of skewing 20 degrees? Imagine pushing the rectangle from the right with your finger and the rectangle tilts like jelly. The angle of tilt is 20 degrees different from the original angle

3.scale

a.scale{    -webkit-transform: scale(1.5);    -ms-transform: scale(1.5);    -o-transform: scale(1.5);    transform: scale(1.5);/*没有火狐的前缀，已经规范了*/}

transform

The original one without magnification is as follows:

transform

4.translate

a.translate{    -webkit-transform: translate(250px,10px);    -ms-transform: translate(250px,10px);    -o-transform: translate(250px,10px);    transform: translate(250px,10px);/*没有火狐的前缀，已经规范了*/}

transform

The original one is like this when it is not moved. Maybe translateY can’t see it clearly, but X is very obvious. Everyone who translateY can think about it:

transform

5.transform synthesis

a.transform:hover{    -webkit-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);    -ms-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);    -o-transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);    transform: rotate(10deg) skew(-20deg) scale(3) translate(150px,0px);/*没有火狐的前缀，已经规范了*/    -webkit-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;/*没有火狐和IE的前缀，已经规范了*/}

transform

You will understand by hovering the mouse

I feel like I have summarized everything Water, but still convenient for reading and studying