Home > Web Front-end > CSS Tutorial > Detailed introduction to transform in CSS3

Detailed introduction to transform in CSS3

黄舟
Release: 2017-10-24 10:33:48
Original
1865 people have browsed it

Recently, the development speed of HTML5 and CSS3 is still very impressive. There are many big and cool websites at home and abroad using the latest technology. In the face of new technologies, how should we correctly grasp and use them in future actual projects? In response to this problem, Haozi decided to analyze CSS3 and explain to the students one by one what a magical thing CSS3 is. Let’s just transform start. If you don’t write well, please give it a try! !

What is CSS3 transform?

The meaning of transform is: change, deform...; transform

What are the common properties of CSS3 transform?

The properties of transform include: rotate() / skew() / scale() / translate(,), which are divided into x and y respectively, such as: 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", the same below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.

demo_transform1

{

-webkit-transform

:

rotate

(10deg

)

;

-moz-transform

:

rotate

(10deg

)

}

Copy after login


##transform:skew():

Meaning: skew;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.

demo_transform2

{

-webkit-transform

:

skew

(20deg

)

;

-moz-transform

:

skew

(20deg

)

}

Copy after login


##transform:scale():

Meaning: scale; "1.5" means enlarging at a ratio of 1.5. If you want to enlarge by 2 times, you must write "2.0", and if you want to zoom out, it is negative "-".

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.

demo_transform3

{

-webkit-transform

:

scale

(1

.

5

)

;

-moz-transform

:

scale

(1

.

5

)

}

Copy after login

transform:translate():

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.

demo_transform4

{

-webkit-transform

:

translate

(120px

,

0

)

;

-moz-transform

:

translate

(120px

,

0

)

}

Copy after login


transform综合:

transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

.

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

,

0

)

;

-moz-transform

:

rotate

(360deg

)

skew

(-20deg

)

scale

(3

.

0

)

translate

(100px

,

0

)

}

Copy after login


The above is the detailed content of Detailed introduction to transform in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template