Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the transform of CSS3". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the transform of CSS3" can help you solve the problem.

What is CSS3 transform?

The meaning of transform is to change or make. To transform; transform.

What are the common properties of CSS3 transform?

The attributes of transform include: rotate () / skew () / scale () / translate (,), with x and y, for example, rotatex () and rotatey (), and so on.

Let's break down the usage of each attribute:

Transform:rotate ():

Meaning: rotation; where "deg" means "degree", such as "10deg" means "10 degrees".

Click here to view the example display

.demo _ transform1 {- webkit-transform:rotate (10deg);-moz-transform:rotate (10deg)}

Transform:skew ():

Meaning: tilt

Click here to view the example display

.demo _ transform2 {- webkit-transform:skew (20deg);-moz-transform:skew (20deg)}

Transform:scale ():

Meaning: proportion; "1.5" means magnified at a scale of 1.5. If you want to magnify 2 times, it must be written as "2.0". If you reduce it, it is negative "-".

.demo _ transform3 {- webkit-transform:scale (1.5);-moz-transform:scale (1.5)}

Transform:translate ():

Meaning: change, displacement; the following is the right displacement of 120 pixels, if the upward displacement, the latter "0" to a value on the line, left and downward displacement is negative "-".

.demo _ transform4 {- webkit-transform:translate (120pxPower0);-moz-transform:translate (120pxPower0)}

Transform synthesis:

These are the common properties of transform. Let's demonstrate a comprehensive example of css3 transform with the help of transition:

.demo _ transform5 {- webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}

.demo _ transform5:hover {- webkit-transform:rotate (360deg) skew (- 20deg) scale (3.0) translate (100px skew 0);-moz-transform:rotate (360deg) skew (- 20deg) scale (3.0) translate (100pxPower0)}

This is the end of the content about "what is the transform of CSS3". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.