20200818-黄春跃

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;三者的区别

标签

评论

this is is footer