[CSS3 animation] the rotation, scaling, skew, and movement of text and images by transform,

[CSS3 animation] the rotation, scaling, skew, and movement of text and images by transform,

I have written CSS3 before.TransformThis feature is not very thorough in its usage. I want to add it today. You know, the driver is ready to drive.

A) Another mentionTransformFour attributes

① Rotation ---> rotate (parameter a), in deg, indicates the rotation angle. Positive values are clockwise and negative values are counter-clockwise.

② Scale ---> scale (parameter a). The Unit is 1, that is, "No unit". The numbers between 0 and 1 are naked and expressed as the scaling ratio.

③ Skew ---> skew (parameter a, parameter B), in deg. The two parameters indicate the skew angle in the x and y directions respectively. Positive values are clockwise and negative values are counter-clockwise.

④ Move ---> translate (parameter a), unit px. The direction of movement is in the plane direction of the div (so it should be hard to understand and put in four-dimensional coordinates, think of div as any plane), there are also positive numbers, positive forward, negative backward.

 

1) rotate. Let's first make a text rotation, as shown below:

/* HTML */<div class = "div1"> I am just an example </div>

Then write a dot style for it.

1/* CSS */3. div1 {4 width: 200px; 5 height: 50px; 6 font-size: 20px; 7 line-height: 50px; 8 text-align: center; 9 border: 1px solid; 10 margin: 100px auto; 11-moz-transform: rotate (45deg);/* Firefox rotation attribute. The parameter indicates the angle (deg indicates the angle), and the negative number is counter-clockwise, positive clockwise */12-webkit-transform: rotate (45deg);/* Safari and Chrome */13-ms-transform: rotate (45deg ); /* IE 9 */14-o-transform: rotate (45deg);/* Opera */15}

 

This is a line of text that is rotated 45 degrees clockwise.

 

2) scale)

1/* HTML */2 <div class = "div2"> I am just an example </div>

1/* CSS */2. div2 {3 width: 612px; 4 height: 408px; 5 font-size: 20px; 6 margin: 100px auto; 7 background: url (img/4.jpg); 8-moz-transform: scale (0.5);/* The scaling attribute. The parameter indicates the scaling factor. The value ranges from 0 to 1. */9-webkit-transform: scale (0.5); 10-ms-transform: scale (0.5); 11-o-transform: scale (0.5); 12}

This indicates that the source image and the image are reduced by 0.5 times.

　　　　　　　

 

3) skew (skew)

1/* HTML */2 <div class = "div3"> I am just an example </div>

1/* CSS */2. div3 {3 width: 412px; 4 height: 208px; 5 font-size: 20px; 6 margin: 100px auto; 7 background: url (img/4.jpg); 8-moz-transform: skew (30deg, 30deg);/* skew attribute. parameters indicate the skew angle of x and y respectively. Negative values are counter-clockwise and positive values are clockwise */9-webkit-transform: skew (30deg, 30deg); 10-ms-transform: skew (30deg, 30deg); 11-o-transform: skew (30deg, 30deg); 12}

This indicates the effect of rotating a positive image 30 degrees clockwise on x and 30 degrees clockwise on y.

 

4) Move (translate)

1/* HTML */2 <div class = "div4"> I am just an example </div>

1/* CSS */2. div4 {3 width: 612px; 4 height: 408px; 5 font-size: 20px; 6 margin: 100px auto; 7 background: url (img/4.jpg); 8-moz-transform: translate (100px);/* move the property in the direction of the div plane. */9-webkit-transform: translate (100px); 10-ms-transform: translate (100px); 11-o-transform: translate (100px); 12}

When I was writing, I could not see any effect if I moved it. rbl. The four attributes of transform are all written, and the effect of writing a single application is really unsatisfactory. Next we will combine the four attributes and use them together, write an effect that looks a little higher than the limit. In the past, it looked at other websites for this effect. At that time

I think it's really good. I have time to write it out in the past two days. Well, let's take a look!

 

5) Integration: rotating, scaling, tilting, and moving.

First, let's tap into a horizontal plane, which looks a bit like a four-dimensional one!

1/* HTML */2 <div class = "div5"> I am just an example </div>

1/* CSS */3. div5 {4 width: 612px; 5 height: 408px; 6 font-size: 20px; 7 color: # FFFFFF; 8 margin: 100px auto; 9 background: url (img/907878604.jpeg); 10-moz-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); /* rotate-zoom-tilt-move */11-webkit-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); 12-ms-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px); 13-o-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px); 14 box-shadow:-15px 7px 10px 3px #444; 15 float: left; 16 position: relative; 17 left: 30%; 18 19}

Look at the effect. It's a bit ugly! Well, if I match it with a 3D background, I believe the effect will be better and the visual effect will be stronger.

 

Next let's write two more, copy and modify the code, and then take a look.

1/* HTML */2 <div class = "div5_1"> I am just an example </div> 3 <div class = "div5_2"> I am just an example </div>

1/* CSS */2. div5_1 {3 width: 612px; 4 height: 408px; 5 font-size: 20px; 6 color: # FFFFFF; 7 margin: 40px auto; 8 background: url(907878604.jpeg ); 9-moz-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); /* rotate-zoom-tilt-move */10-webkit-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); 11-ms-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px); 12 box-shadow:-15px 7px 10px 3px #444; 13 position: absolute; 14 left: 30%; 15} 16. div5_2 {17 width: 612px; 18 height: 408px; 19 font-size: 20px; 20 color: # FFFFFF; 21 margin:-20px auto; 22 background: url (img/907878604.jpeg); 23-moz-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); /* rotate-zoom-tilt-move */24-webkit-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px ); 25-ms-transform: rotate (-17deg) scale (0.5) skew (67deg) translate (0px); 26 box-shadow:-15px 7px 10px 3px #444; 27 position: absolute; 28 left: 30%; 29}

 

If you look at it carefully and write it on the page, add some events and colors to it. I believe that the visual impact will come up.

 

Summary:TransformThe usage of several attributes is like this. The special effects of the front-end are carefully researched by yourself. Just like filming a movie, it takes time and effort, what you make will be refreshed, the page gives the user a visual sense, the color sense will be stronger. This is an address about CSS3 animation, shadow, you can refer to learning http://www.css3maker.com/