- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m just tying to make a door open type animation using css 3d property..everything good but the image don’t stick to the left..it slightly move to left and then transform..
this is the link –
https://jsfiddle.net/pranab/f51ej5q9/2/
Nice animation. Not sure if I understand exactly what you are after, but in my mind this animation works better if you would use the outer wrapper as the element “to hover over”, for it stays at it’s place. Also, if you would like the “door” to remain on the left side while hovering the element, best go with css-animations. The animation-fill-mode: forwards
property-value pair is what you want in that case, you can read more about the css-animation-fill-mode-property here.
thanks @Atelierbram…but what i exactly want is the image stick to the left side when you hover but right now after hovering, the image move a little left and then transform…
So you don’t like there to be a (small) gap between the image and the red border of .main
? They should be “touching”?
Yes, exactly @Atelierbram.. how can i do that?
When you look at my updated fork of your demo then there is an added value for transitionX on the transform property in the keyframe animation, as well as some adjustments on the image on hover (height
and margin-top
). I’m sure this could be done in other ways as well, hope this helps.