html - 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/