0

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

Miles M.
  • 4,089
  • 12
  • 62
  • 108

2 Answers2

1

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.

David C. Bishop
  • 6,437
  • 3
  • 28
  • 22
1

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);
}
joshnh
  • 8,374
  • 4
  • 35
  • 53