css3新动_CSS3新特性（transform），过渡动画，动画，弹性布局，响应式

1.CSS3新特性

1)转换

[1]2D转换

二维平面移动

语法：

transform:translateX(移动的距离) translateY(移动的距离);

Transform:translate(水平移动距离，垂直移动距离)

可以设置负值，水平的正值是向右移动，垂直的正值是向下移动

二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

transform-origin:center(默认值)

可以设置left,top,right,bottom,center,

百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比

[2]3D转换

透视点

在所看元素的父元素或者是祖先元素上设置透视点

语法:perspective: 1000px;

三维立体的移动

语法：

transform: translateZ(200px);

transform: translate3d(水平移动,垂直移动,z轴移动);

z轴：z轴垂直于屏幕，方向是射向我们。

三维立体的旋转

语法：

/*transform: rotateX(30deg);*/

/*transform: rotateY(30deg);*/

/*transform: rotateZ(30deg);*/

transform: rotate3d(1,1,1,30deg);

解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向(x,y,z)这个坐标的向量，用这个向量作为轴进行旋转。

2)缩放

语法：

transform:scale(整体放大的倍数)

Transform:scale(水平缩放的倍数，垂直缩放的倍数)

3)倾斜

语法：transform: skew(15deg,0deg);

小技巧：如果先要文字板正，那么反倾斜即可

案例：

1

2

3

4

5

6

7

8

9

10

11

12

13 #d1{

14

15 width:300px;

16

17 height:300px;

18

19 background:green;

20

21 margin:0 auto;

22

23

24

25 /*倾斜*/

26

27 transform:skew(15deg,0deg);

28

29 }

30

31

32

33 h1{

34

35 transform:skew(-15deg,0deg);

36

37 }

38

39

40

41

42

43

44

45

46

47

helloworld

48

49