初学css3做旋转立方体

    <style>
    //   *{景深perspective表示眼睛到屏幕之间的距离}
       body{
            perspective: 800px;
        }
        .con {
            position: relative;
            width: 200px;

            height: 200px;
            

            margin: 200px auto;
           

            line-height: 200px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            transform-style: preserve-3d;
            animation: move 5s linear infinite;
            transform-origin: center center 100px;
        }

        .con>div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.4;
            }
        //*{rotate3d(x,y,z,deg)中的x、y、z的取值可以为任意值（包括小数），其实它们就是x轴、y轴、z轴上的坐标值，三个值就可以唯一确定一个3D空间的点，然后从原点到这个点连接一条直线就是旋转轴，deg则是元素沿着这个旋转轴旋转的角度}

        @keyframes move {
            from {
                transform: rotate3d(3,2,1,0deg);
            }

            to {
                transform: rotate3d(3,2,1,360deg);
            }
        }


        .one {
            background-color: red;

        }

        .two {
            background-color: blue;
            transform-origin: left;
            transform: translatex(200px) rotatey(-90deg);

        }

        .three {
            background-color: brown;
            transform-origin: right;
            transform: translatex(-200px) rotateY(90deg);

        }

        .four {
            background-color: green;
            transform-origin: bottom;
            transform: translatey(-200px) rotateX(-90deg);

        }

        .five {
            background-color: purple;
            transform-origin: top;
            transform: translatey(200px) rotateX(90deg);

        }

        .six {
            background-color: yellow;

            transform: translateZ(200px);


        }
    </style>


    <div class="con">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
    </div>