CSS 3D Transform don't stick to the left

[Pranab]

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/

[Atelierbram]

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.

http://codepen.io/atelierbram/pen/EZyWwJ

[Pranab]

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…

See the Pen ggMWxK by Pranab (@Phe0nix) on CodePen.

[Atelierbram]

So you don’t like there to be a (small) gap between the image and the red border of .main? They should be “touching”?

[Pranab]

Yes, exactly @Atelierbram.. how can i do that?

[Atelierbram]

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.

[Author]

Posts