初学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>