day17 html5

day17知识点

一、2D：平面控件的元素变形
变形属性：transform：
transform的属性值为功能函数
2D功能函数：
2D的位移，2D的旋转，2D的缩放，2D的倾斜

2D位移：
transform：translate（x，y）；属性值（px ， %）
transform：translateX（x轴移动的距离）
transform：translateY（y轴移动的距离）

2D的缩放：
transform：scale（x，y）  x ， y  这两个参数为一个数字，大于1放大  小于1缩小
transform:scaleX()
transform:scaleY()

2D的旋转：
transform:rotate(30deg)
transform:rotateX(30deg)
transform:rotateY(30deg)

2D的倾斜：
transform:skew(度数)
transform:skewX(度数)
transform:skewY(度数)

2D改变变形原点：
transform-origin：x，y；
属性值：left top right bottom  center    px     %  

缩放旋转对位移的影响：多个功能函数共同使用的情况下，尽量先写位移 后写 其他的功能函数。

css3目标伪类选择器：
元素选择符：target{当该元素被相关URL指向的时候，做样式的变换}

3D空间：
平面空间：transform-style：flat

形成3D空间（让父元素形成3D空间、3D舞台）：transform-style:preserve-3D

3D的功能函数：
3d-位移  3d-缩放  3d-旋转

3d位移：
transform:translate3d(x,y,z);
transform:translateZ();

transform:translate(x,y);
transform:translateX()
transform:translateY()