3D与动画

• 形成3D空间

transform-style:preserve-3d;

• 景深：观察物体时，近大远小

perspective:800px;（给父级元素添加）

• 观察点位置设置

perspective-origin:;
                            left right top bottom px

• 背面不可见

backface-visibility:;
                           hidden 不可见
                           visible 可见



animation 不需要事件触发，

1、定义动画

from{}起始位置
to{}终点位置

0%{}起始位置
25%{}过程1
...
100%{}终点位置

2、调用动画

animation-name:mz;                      动画名字
animation-duration:;                      运动时间
animation-delay:;                           延迟时间
animation-iteration-count:infinite;  运动次数：无限次（数字）
animation-direction:reverse;          运动方向：逆时针
                               alternate                           先顺再逆（奇顺偶逆）
                               alternate-reverse              先逆再顺（奇逆偶顺）
animation-timing-function:;             运动类型
animation-play-staty:running/paused;动画状态：运动/暂停

综合写法
animation:名字 运动时间 速度 延迟时间 次数;

选择器：target{} 当元素被点击时的指向，发生样式的改变

css样式 圆角

borer-radius:;
元素是正方形    宽度值一半的px    50%   正圆
元素是长方形    较小值的一半px              半圆
                         50%                           椭圆

3D与动画

原文：https://www.cnblogs.com/strongerPian/p/12487638.html