Shift and Rotation Using CSS [duplicate]

Question

i hope everyone is doing well today. I am new to HTML and CSS and I would appreciate your help, please. I would like to shift and rotate an image (at the same time) when i hover the mouse over the image. However I have only been able to achieve either rotation, or shifting but not both. I would like to do this using CSS and here is the code.

In general, I am using Mozilla Firefox to test out most of my HTML and CSS code but I do understand for Google Chrome and IE I should use similar code like -webkit-transform and -ms-transform.

Thank you!

.data3 img:hover{
transform:rotate (70deg);
transform: translate3d(80px,0px,0px);
transition: transform .5s ease-out;/*want to rotate and shift slowly*/
}

Community · Accepted Answer · 2017-05-23 11:45:19Z

0

Put the tanslate and the rotate command behind each other:

transform: rotate(90deg) translateX(50px);

Already answered here.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 14, 2016 at 18:29

FabianTe

6599 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark A. Over a year ago

thank you very much, it works :)

Collectives™ on Stack Overflow

Shift and Rotation Using CSS [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related