css3 创建旋转方块

Question

.spinner{/*color*/background-color:#3e4b54;/*layout*/width:150px;height:150px;animation:rotateplane5sease-in-out;-webkit-animation:rotateplane5sease-in-out;}}@keyframesrotateplane{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%做的动画rotateX0-180deg,rotateY180deg-0.此时表现的动画相当于rotateZ（180deg）（不同浏览器旋转方向上有所差异）.