css3 创建旋转方块

Question

.spinner {
    /* color */
    background-color: #3e4b54;

    /* layout */
    width: 150px;
    height: 150px;

    animation: rotateplane 5s ease-in-out;
    -webkit-animation: rotateplane 5s ease-in-out;
}

}
@keyframes rotateplane {
    0% {
        transform: perspective(120px);
    }

    50% {
        transform: perspective(120px) rotateY(180deg);
    }

    100% {
        transform: perspective(120px) rotateX(180deg) rotateY(180deg);
    }
}

这段代码可以创建一个旋转方块，顺着Y轴转180，然后顺着x轴转180，但是当我把 100% 时候的 rotateY(180deg) 删除之后，感觉就是2d旋转了，这是什么原因？

Answer 1

如果把rotateY(180deg)删除，相当于50% - 100% 做的动画 rotateX 0 - 180deg, rotateY 180deg - 0 .此时表现的动画相当于rotateZ（180deg） （不同浏览器旋转方向上有所差异）.

Answer 2

http://xiadd.me/2015/09/18/css%E4%B9%8B%E9%95%BF%E6%96%B9%E4%BD%93%E6%97%8B%E8%BD%AC/

有兴趣的话可以看看这个