如何使用关键帧使我的div水平滑动？

Question

我正试图让我的div在悬停时水平滑动，但是目前它们在悬停时不会保持相同的旋转，我正在看翻译（）但你怎么说在当前轮换中向下移动？

.box
    width: 200px
    height: 400px
    float: left
    border: solid black 1px
    transform: rotateZ(25deg)
    margin-top: -100px
    &:hover
        transform: translateX(-10px)    translateY(100px)

见codepen http://codepen.io/MrJoshFisher/pen/yJRPWP

这个想法如下

所以当你将鼠标悬停在其中一个盒子上时，它会向上滑动，然后当鼠标离开时它会向下滑动

Answer 1

将rotate添加到动画transform中：

@keyframes shine 
    0% 
        transform: translateX(0px) translateY(0px) rotateZ(25deg)
    100%
        transform: translateX(-80px) translateY(100px) rotateZ(25deg)