Shift and Rotation Using CSS

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*/
}

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

Put the tanslate and the rotate command behind each other:

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

Already answered here.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 14 '16 at 18:29

FabianTe

516
4
22

thank you very much, it works :) – Mark A. Mar 15 '16 at 00:35

Shift and Rotation Using CSS

1 Answers1