css3实现立方体旋转

涉及知识点

css3转换transform

transform-origin:  x y z;    定义转换元素的位置 默认50% 50% 0

transform-style：flat | preserve-3d

translate:从当前位置移动 translateX(px) | translateY(px) | translateZ(px)

rotate：给定度数顺时针旋转  rotateX（deg）| rotateY(deg) | rotateZ(deg)

persperctive:定义元素距离试图的距离 以px记

backface-visibility: hidden|visible  定义当前元素不面向屏幕时是否可见 --->注意元素的正反

css3动画animation 

1.关键帧：@keyframes name{

                   0%{ 初始状态}

                  100%{ 终态} //可以只写中间状态50%{}

}

2.调用动画：animation：name | duration | [ timing-function | delay | iteration-count | direction]

css代码
        .wrapper > div{
            margin-left: 100px;
            position: relative;
            float: left;
            width: 500px;
            height: 500px;
            perspective: 5000px;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(20deg) rotateZ(20deg);
            animation: round 10s linear infinite;
        }
        
        .wrapper-left>div,
        .wrapper-right>div {
            top: 150px;
            left: 150px;
            position: absolute;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            opacity: 0.7;
            border: 1px solid #000;
            float: left;
            margin: 0 auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        .wrapper-right>div{
            backface-visibility: hidden;
        }
        .front {
            background-color: bisque;
            transform: translateZ(100px);
        }
        .back{
            background-color: brown;
            transform: translateZ(-100px) rotateX(180deg);
        }
        .left{
            background-color: chocolate;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background-color:coral;
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background-color: cornflowerblue;
            transform: translateY(-100px) rotateX(90deg) ;
        }
        .bottom{
            background-color: violet;
            transform: translateY(100px) rotateX(-90deg) ;
        }

        @keyframes round{
            0%{
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            100%{
                transform:  rotateX(360deg) rotateZ(360deg);
            }
        }

html代码
<div class="wrapper">
        <div class="wrapper-left">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="left">3</div>
            <div class="right">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
        <div class="wrapper-right">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="left">3</div>
            <div class="right">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>

 结果如下：