Css变换3d

Question

我正在尝试创建一个CSS开头书，但转换似乎不起作用。 https://jsfiddle.net/g722fq84/

@-webkit-keyframes spincube {
from,to  {                                                    }
10%      { transform: rotateY(-90deg) translatex(60px) translatez(75px)    
 }

}

封面的最终位置很好，但封面在开头就是正确的，我该如何解决？

Answer 1

您可以指定transform origin。

，而不是在x和z轴上翻译div

.front {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    transform-origin: left;
}

更新了jsfiddle： https://jsfiddle.net/g722fq84/2/