MrJoshFisher MrJoshFisher - 1 year ago 105
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 ?

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

see codepen

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 Source

add rotate to your animation transform as well:

@keyframes shine 
        transform: translateX(0px) translateY(0px) rotateZ(25deg)
        transform: translateX(-80px) translateY(100px) rotateZ(25deg)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download