SOLVED: How to set CSS Transform Origin

Hi guys, I need to set an origin for a CSS tranform rotate Z for psedo :hover on an image.
I don’t know which kind of syntax to use in the field,
20% 20% does not work
or maybe there is a bug in that function?
I could share a screencast of that, if needed

thanks

1 Like
Try this out,,,,


a:before {
    -webkit-transition: all 300ms 0s ease-in-out;
    transition: all 300ms 0s ease-in-out;

    content: "\f015";
    display: inline-block; //as @Rohit Azad suggested
    font-family: FontAwesome;

    // .. etc ..
}

a:hover:before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

or also try this one:

a:hover:before[class*="icon-"] {
     -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    .rotate(360deg);

}

I’m not looking for the custom code, I’m saying that the field Transform Origin does not work as expected

Here a screencast:

Hi Aldo,

you need to apply the transform origin to the default state and can leave the transform origin on hover empty (because it inherits it from the default state). If you only set the transform origin on hover, the default origin (which is probably center center) will be used for the default state, which causes the “jump”.

Please see my video.

Best regards,
timmse

1 Like

Thanks @timmse this suggestion helped me to solve also another problem (see the post CSS Transition on :hover).

:sweat_smile:

1 Like