我正在尝试创建一个CSS动画,它看起来像一个div围绕着一张图片(或另一个div)在X轴上旋转。
我已经创建了大致的想法:http://codepen.io/Kupe517/pen/zBKGev,但是动画的div没有我想要的旋转效果。我认为我需要在变换中添加一些rotateX()并加入透视,但我就是找不到正确的组合。我附上了一个大概的图像,显示我想要实现的动画类型。
这是我的当前动画代码:
@keyframes moveBack {
0%{transform:translateY(0); z-index:10;}
25%{transform:translateY(435px); z-index:10;}
26%{z-index:0;}
50%{transform:translateY(0) scale(.8); z-index:0;}
75%{transform:translateY(-435px); z-index:0;}
76%{z-index:10;}
100%{transform:translateY(0); z-index:10;}
}