2020.0407知识总结

知识总结

2D：平面空间的元素变形。
变形属性：transform：
Transform的属性值为功能函数。
一、2D的功能函数：
(1)2D的位移：transform:translate(x,y);
Transform:translateX(x轴移动的距离)；
Transform:translateY(y轴移动的距离)；(2)2D的旋转:transform:rotate(30deg)；
Transform:rotateX(30deg)
Transform:rotateX(30deg)
注：deg是度数。 (3)2D的缩放：transform:scale(x,y);
Transform:scaleX(x轴的缩放)；
Transform:scaleY(y轴的缩放)；
注：x,y这两个参数为一个数字，大一1放大，小于1缩小。
(4)2D的倾斜：transform:skew(度数)；
Transform:skewX(度数)；
Transform:skewY(度数)；
注：默认是x轴倾斜。
二、改变变形的原点：
属性：Transform-origin:x y；
属性值：left top；
10px 20px
10% 20%
center
三、目标伪类选择器：
元素选择符：target{
当该元素被相关的url指向的时候，做样式的转换。
}
四、3D的功能函数
首先形成3D空间（让父元素形成3D空间）
Transform-style:preserve-3D。
然后在进行3D的元素变换。
3D的位移：transform:translate(x,y,z);
Transform:translateZ(z轴移动的距离)；