3d旋转骰子（主要知识点：@keyframes，position，flex，transform）

<style>
            :root{
                 font-size:calc(100vw / 750 * 100);
            }
            @keyframes nnn{
                from{
                    transform: rotateX(0) rotateY(0) rotateZ(0);
                }
                to{
                    transform: rotateX(360deg) rotateY(480deg) rotateZ(580deg);
                }
            }
            .box{
                width: 120px;
                height: 120px;
                transform-style: preserve-3d;
                position: relative;
                left: 50%;
                top: 200px;
                transform: translate(50% 50%);
                animation:nnn 10s linear infinite alternate-reverse;
            }
            .box>div:nth-child(2){
                transform: translateX(-50%) rotateY(90deg);
            }
            .box>div:nth-child(4){
                transform: translateY(50%) rotateX(90deg);
            }
            .box>div:nth-child(3){
                transform: translateY(-50%) rotateX(-90deg);
            }
            .box>div:nth-child(5){
                transform: translateX(50%) rotateY(-90deg);
            }
            .box>div:nth-child(6){
                transform: translateZ(90px) rotateY(180deg);
            }
            .box>div:nth-child(1){
                transform: translateZ(-90px) ;
            }
        /*     .box {
                height: 6rem;
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                align-items: center;
            } */

            .box>div {
                position: absolute !important;
                width: 1.2rem;
                height: 1.2rem;
                border-radius: .1rem;
                background-color: #bebebe;
                flex: 0 0 auto;
                position: relative;
            }
            .box>div:nth-child(1)>p{
                width: .4rem;
                height: .4rem;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -.2rem;
                margin-left: -.2rem;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(2)>p:nth-child(1){
                width: .4rem;
                height: .4rem;
                position: absolute;
                left: 0;
                top: 0;
                margin-top: 0px;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(2)>p:nth-child(2){
                width: .4rem;
                height: .4rem;
                position: absolute;
                right:  0;
                bottom:  0;
                margin-bottom: 0px;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(3)>p:nth-child(1){
                width: .4rem;
                height:.4rem;
                position: absolute;
                left: 0;
                top: 0;
                margin-top: 0px;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(3)>p:nth-child(2){
                width: .4rem;
                height: .4rem;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -.2rem;
                margin-left: -.2rem;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(3)>p:nth-child(3){
                width: .4rem;
                height: .4rem;
                position: absolute;
                right:  0;
                bottom:  0;
                margin-bottom: 0px;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(4){
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: space-between;
                justify-content: space-between;
            }
            .box>div:nth-child(4)>div{
                width: .4rem;
                height: .4rem;
                border-radius: 50%;
                background: #000;
                flex-basis: .41rem;
            }
            .box>div:nth-child(5){
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: space-between;
                justify-content: space-between;
            }
            .box>div:nth-child(5)>div{
                width: .4rem;
                height: .4rem;
                border-radius: 50%;
                background: #000;
                flex-basis: .41rem;
            }
            .box>div:nth-child(5)>p{
                width: .4rem;
                height:.4rem;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -.2rem;
                margin-left: -.2rem;
                border-radius: 50%;
                background: #000;
            }
            .box>div:nth-child(6){
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: space-between;
                }
                .box>div:nth-child(6)>div{
                    width: .4rem;
                    height: .4rem;
                    border-radius: 50%;
                    background: #000;
                }
        </style>

   

动画(Animation)

1.原理：改变元素的样式，在这个过程中，可以多次改变这套样式

@keyframes

1.定义和创建动画

2.语法规则

@keyframes 动画名{
    0%/from{
        //动画开始时，元素的样式
    }
    百分比{
        //动画执行到某个时长，元素样式
    }
    ....
    100%/to{
        //动画结束时，元素的样式
    }
}

animation

1.简写属性，用来调用动画并设置相关属性

animation: name duration timing-function delay iteration-count direction;

2.animation-name：调用的动画名称

3.animation-duration：动画执行的时间

4.animation-timing-function：动画执行的速度曲线

linear：匀速
ease：慢 - 快 - 慢
ease-in：慢速开始的过渡效果
ease-out：慢速结束的过渡效果
ease-in-out：慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：贝塞尔曲线
steps(n[,end | start])：阶跃函数，用于把整个操作领域切分为相同大小的间隔，每个间隔都是相等的
n:指定了时间函数中的间隔数量（必须是正整数）
第二个参数是可选的，可设值：start和end，表示在每个间隔的起点或是终点发生阶跃变化，如果忽略，默认是end

5.animation-delay：动画延迟执行的时间

6.animation-interation-count：设置动画执行的次数

值：n：具体播放的次数，默认值为1

infinite：无限次

7.animation-direction：是否应该轮流反向播放动画

值：normal：默认值，动画正常播放

alternate：动画应该轮流反向播放

8.animation-fill-mode：规定动画在播放之前或之后，其动画效果是否可见

9.animation-play-state：规定动画正在运行还是暂停

属性：paused：规定动画已暂停

running：规定动画正在播放

2D/3D转换(Transform)

1.定义：实现向元素的2D或3D转换

2.transform-origin:x y z：设置2D或3D转换时元素的位置（比如旋转的中心点） -- 默认值为50% 50% 0

3.transform-style：设置3D转换

注意：1.由父子级关系

2.给父元素设置transform-style

3.值：flat：子元素不保留3D位置（不是3D）

preserve-3d:子元素保留3D位置(子元素可以使用3D转换）

4.perspective：设置3D元素对于视图的距离，以像素计。 -- 子元素会具有透视效果（景深）

1. backface-visibility：当元素经过变换以后，如果背对着用户，去设置这个元素是可见状态还是不可见状态

   值：visible：可见

   hidden：不可见

平移

1.tanslate(x,y)：沿x轴和y轴方向平移

2.translate3d(x,y,z)：沿x轴，y轴和z轴方向的平移

3.translateX/Y/Z()：沿某个轴平移

缩放

1.scale(x,y)：沿x轴和y轴同时缩放 - 1为不缩放，大于1为放大

2.scale3d(x,y,z)：沿x轴、y轴和z轴同时缩放

3.scaleX/Y/Z()：沿某个轴缩放

旋转

1.rotate(angle)：设置顺时针或逆时针旋转（沿z轴旋转）

2.rotate3d(x,y,z,deg)：沿x轴、y轴和z轴同时旋转

3.rotateX/Y/Z()：沿某个轴旋转

倾斜

1.skew(x,y)：向x轴和y轴同时倾斜扭曲

2.skewX/Y()：向x轴或y轴倾斜扭曲