20200818-黄春跃

---

今日总结

今天学到了很多新的知识，需要下来好好消化一下。

晚自习听了几位同学的经验分享，感觉对自己有比较好的影响，多多向他们学习。

知识点总结

1.2D转换

今天上午学了转换中的2D转换。（在x轴和y轴发生转换的效果）

转换transform(属性)：改变元素在页面中的位置、形状、大小、角度即为变换。

取值包括：位移、缩放、旋转、倾斜。

位移translate（n）(属性值)

n取一个值的时候相当于translateX，表示指定元素在x轴上进行平移，而translateY表示指定元素在y轴上进行平移。

n取两个值的时候，第一个参数表示指定元素在x轴的平移方向，第二个参数表示指定元素在y轴的平移方向。

单位为px，%

注意：一般元素设置宽度高度的百分比是以父元素为参照，而translate是以自身的宽高为基准。

缩放scale(n)

n取一个参数

n>1时，x轴y轴都放大。

n=1时，x轴和y轴保持不变。

0<n<1时，x轴y轴都缩小。

-1<n<0时，x轴y轴都缩小且反转。

n<-1时，x轴y轴都放大且反转。

scaleX表示单独设置x轴缩放

scaleY表示单独设置y轴缩放

n取两个参数

按照n的取值，分别代表x轴和y轴的缩放。

旋转rotate(n deg)

n为正数时，顺时针旋转。

n为负数时，逆时针旋转。

倾斜skew()

默认状态下为skewX(x)

x取正，y轴逆时针倾斜。

x取负，y轴顺时针倾斜。

skewY(y)

y取正，x轴顺时针倾斜。

y取负，x轴逆时针倾斜。

2.3D转换

透视距离prespective

模拟人的眼睛到3D转换的元素之间的距离，距离不同，看到效果不同。

数值越大表示距离越远。

3D旋转

rotateX(ndeg) 以x轴为中心，旋转元素；

rotateY(ndeg) 以y轴为中心，旋转元素；

rotateZ(ndeg) 以z轴为中心，旋转元素；

rotate3D(x,y,z,deg) x,y,z取值为0表示不参与旋转，取值大于0，表示该轴参与旋转。

3D位移

translateX(n) 表示在x轴上进行平移；

translateY(n) 表示在y轴上进行平移；

translateZ(n) 表示在z轴上进行平移；

translate3D(100px,100px,200px) 指定对象的3D位移，第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴。

3.转换原点

transform-origin取值

1.以px为单位的数字

2.%

3.关键字

x:left/right/center

y：top/button/center

题目

1.页面垂直居中

position: absolute;

top:50%;

left:50%;

translate(-50%,-50%)

2.display: none; opacity: 0; visibility:hidden;三者的区别