1. 浏览器前缀?⭐️面试会问
CSS3去兼容不同的浏览器,针对旧的浏览器做兼容,新浏览器基本不需要添加前缀。
2. transition 过渡?
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数),也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。
可以直接写成一条 transition:1s 2s linear; 第一个表示transition-duration transition-delay transition-timing-function
注:⭐️不要加到hover上,如果加到hover上,那移入的时候有过度,移开的时候就没有了。
3. transform变形?
translate : 位移
translateX
translateY
translateZ ( 3d )
scale : 缩放 (值是一个比例值,正常大小就是1,会已当前元素中心点进行缩放) 只写一个值就是对宽缩放
scaleX
scaleY
scaleZ (3d)
rotate : 旋转 ( 旋转的值,单位是角度 deg )
rotateX (3d) 沿x旋转是往屏幕内的,所以是3d效果
rotateY (3d)
rotateZ ( 和rotate是等级关系,那正值按顺时针旋转,负值按逆时针旋转 ) 沿y旋转是我们看到的2d平面内的旋转
skew : 斜切
skewX : 单位也是角度,正值向左倾斜,负值向右倾斜。
skewY
transform的注意事项:
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素,但是不能添加给内联元素。
3. 复合写法,可以同时添加多个变形操作。
执行是有顺序的,先执行后面的操作,再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)