空间转换 动画

138 阅读1分钟

空间转换

空间位移

属性:transform
语法:transform:translate3d(X,Y,Z);
取值:
1.像素
2.百分比

透视

属性:perspective(添加给父元素)
语法:perspective:值;
取值一般在400px~1200px之间
空间转换时为元素添加近大远小,近实远虚的视觉效果
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离

空间旋转

属性:transform
语法:
transfrom:rotate3d(X,Y,Z);
transfrom:rotateX(角度值);
transfrom:rotateY(角度值);
transfrom:rotateZ(角度值);

动画

属性:animation
构成动画的最小单元:帧或动画帧
注意点:
1.动画名称不能重复
2.动画名称不能使用running
3.可参与css过渡属性的都可以参与动画
4.如果调用动画初始样式和盒子样式一样则可省略不写
步骤:
1.语法: @keyframes 动画名称{
from{ }
to { }
}

27897054-958e8b212cbe7ffa.webp