CSS3动画实现六面小方块旋转

话不多说，直接上代码！！！

* {
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
    transform-style: preserve-3d;
    transform: rotateX(-90deg);
    animation: turn 5s linear infinite;
}

.wrapper div {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    color: #fff;
    position: absolute;
    opacity: 0.8;
}

.wrapper .item1 {
    background: red;
    transform: translateZ(100px);
}

.wrapper .item2 {
    background: blue;
    transform: rotateY(-90deg) translateZ(100px);
}

.wrapper .item3 {
    background: orange;
    transform: rotateY(-180deg) translateZ(100px);
}

.wrapper .item4 {
    background: green;
    transform: rotateY(-270deg) translateZ(100px);
}

.wrapper .item5 {
    background: deeppink;
    transform: rotateX(90deg) translateZ(100px);
}

.wrapper .item6 {
    background: purple;
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes turn {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
    75% {
        transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

效果自己尝试一下，感觉打开了css3动画的新世界！