MrJoshFisher MrJoshFisher - 3 months ago 7
CSS Question

How can I make my divs slide horizontally using keyframes?

I'm trying to get my divs to slide horizontally when on hover, but currently they dont stay at the same rotation when on hover, I'm looking at translate() but how do you say move down in current rotation ?

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


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

the idea is as follows
enter image description here

so when you hover on one of the box it slides up then when your mouse leaves it goes back down

Answer

add rotate to your animation transform as well:

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