CODEWITHSUNDEEP
imagecssrotationimage-rotation
Miles M.
Miles M.

Reputation: 4169

how to rotate an image in css3

I'd like to make a rotation of an image, so I red that we can do that width

.rotate {

-webkit-transform: rotate(-9deg);

-moz-transform: rotate(-9deg);

transform: rotate(-9deg);}

but, this is if you want to rotate it according to z axis ( horizontal is x, vert. y, and z comes to you if you see what I mean)

Okay, I would like to rotate it on the x or y axis to give it a 3d effect. Is that possible in css3 ? Thanks

Upvotes: 0

Views: 3024

Answers (2)

joshnh
joshnh

Reputation: 8704

You can do what you are after using CSS perspective. Here is an example: http://jsfiddle.net/joshnh/QHxzA/

The important bit of code is (don't forget to use browser prefixes):

img {
    transform: perspective(500px) rotateX(15deg);
}

Upvotes: 1

David C. Bishop
David C. Bishop

Reputation: 6615

CSS3 has 3D transforms. That's probably what you want. It's supported on Firefox, Chrome, and IE10 but not older IE's or Opera.

Some more in depth:

http://caniuse.com/transforms3d

http://www.html5rocks.com/en/tutorials/3d/css/

http://www.webkit.org/blog/386/3d-transforms/

Also Z axis refers to depth axis (into/outfrom the screen). Rotating around the Z-Axis would just result in a normal 2D rotation (like if you stuck a pin through a card). Your looking for X/Y axis.

Upvotes: 1

Related Questions