css——transition过度模块、perspective透视、transform2D转换、box-shadow和text-shadow、animation动画、3D转换

1、transition
transition：property duration timing-function；
property：指定哪个属性需要过度（例如 width 、bgc等）
duration：过度时间
timing-function：控制过度动画速度（linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速）
三要素（缺一不可）：
1、元素属性改变（可以hover、active等）
2、指定需要改变的属性
3、改变时间

2、perspective
perspective：mpx；透视图（近大远小）
m大小取决多远看图
可结合transform：rotate（deg）+transition做旋转动画

3、transform（都可独立针对xyz一方向改变）
旋转：transform：rotate（deg）（默认以中心点顺时针旋转）
transform-origin：水平 垂直；（自定义中心点的位置）
平移：transform：translate（水平，垂直）
缩放：transform：scale（水平，垂直）传入数字代表放大缩小倍数，若只传一个数 则xy同步变化
综合：transform：rotate（deg） translate（x，y） scale（num）；
（会改变坐标系）

4、box-shadow
box-shadow：水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认外阴影，inset传入内阴影）

5、text-shadow
text-shadow：水平 垂直 模糊度 阴影颜色（默认跟从文字颜色）；

6、animation（与过度区别：无需人为触发）
（1）animation-name：指定动画名称
（2）@kframes name{ from{ }to{ }} 或是{0%{ } 25%{ }等等}
（3）animation-duration：指定动画时间
上三步必须有
animation-delay：延迟时间
animation-timing-function：控制过度动画速度（linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速）
animation-iteration-count：动画次数（infinite-无限次）
animation-direction：动画方向（alternate-往返）
animation-play-state：动画状态（默认running 设置paused为暂停）
animation-fill-mode：none；（forward-最后一帧停止 backward-跳转最后一帧）

简写：animation：name 时长 速度 delay 动画次数 往返与否；（name和时长必须有）

注：1、如果有和默认样式中同名的样式，会覆盖默认样式
2、编写动画中，固定不变的值写在前面，需要变化的值写在后面

7、3D转换
transform-style：preserve-3d；
再结合translate+rotate做立方体（先rotate（改变坐标系）再translate（固定数值））
加上perspective：增加立体效果；

//长方体
ul{
            width: 500px;
            height: 500px;
            margin: 300px auto;
            transform: rotateX(45deg) rotateY(0deg);
            transform-style: preserve-3d;
            position: relative;
            perspective: 2000px;
        }
        ul li{
            width: 500px;
            height: 500px;
            list-style: none;
            text-align: center;
            line-height: 500px;
            font-size: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li:nth-of-type(1){
            background-color: #ffff00;
            transform:scale(2,1) rotateX(90deg) translateZ(250px);
        }
        ul li:nth-of-type(2){
            background-color: #0ff3ff;
            transform:scale(2,1) rotateX(180deg) translateZ(250px);
        }
        ul li:nth-of-type(3){
            background-color: #334455;
            transform:scale(2,1) rotateX(270deg) translateZ(250px);
        }
        ul li:nth-of-type(4){
            background-color: #F07AFA;
            transform:scale(2,1) rotateX(360deg) translateZ(250px);
        }
        ul li:nth-of-type(5){
            background-color: #f98769;
        }
        ul li:nth-of-type(6){
            background-color: #954210;
        }

六棱柱动画
ul{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: absolute;
            left: 1400px;
            top: 500px;
            animation: lunbo 10s infinite linear;
        }
        @keyframes lunbo {
            from{
                transform: rotateX(-20deg) rotateY(360deg);
            }
            to{
                transform: rotateX(-20deg) rotateY(0deg);
            }
        }
        ul:hover{
            animation-play-state: paused;
        }
        ul:hover li img{
            opacity: 0.3;
        }
        ul li:hover img{
            opacity: 1;
        }
        ul li{
            width: 200px;
            height: 200px;
            list-style: none;
            float: left;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li:nth-of-type(1){
            transform:rotateY(60deg) translateZ(200px);
        }
        ul li:nth-of-type(2){
            transform:rotateY(120deg) translateZ(200px);
        }
        ul li:nth-of-type(3){
            transform:rotateY(180deg) translateZ(200px);
        }
        ul li:nth-of-type(4){
            transform:rotateY(240deg) translateZ(200px);
        }
        ul li:nth-of-type(5) {
            transform: rotateY(300deg) translateZ(200px);
        }
        ul li:nth-of-type(6){
            transform:rotateY(360deg) translateZ(200px);
        }