Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS 3D Transform don't stick to the left

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #249978
    Pranab
    Participant

    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/
    
    #249983
    Atelierbram
    Participant

    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

    #249987
    Pranab
    Participant

    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.

    #249994
    Atelierbram
    Participant

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

    #250007
    Pranab
    Participant

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

    #250011
    Atelierbram
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.