CSS3 image rotate

Question

I want to rotate an image, but I can't find how to do it the way I need to, the picture below will give a better example. I know it's a YouTube picture but its the closest thing i could find to what I'm talking about!

An example of what I don't need is something like:

-webkit-transform: rotate(-29deg);
   -moz-transform: rotate(-29deg);
    -ms-transform: rotate(-29deg);
     -o-transform: rotate(-29deg);
        transform: rotate(-29deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

It's more like image depth. Is it possible and if so how would I get the effect?

Image link

Answer 1

You mean something like this?

Perspective to the left:

-webkit-transform: perspective( 300px ) rotateY( 45deg );
-moz-transform: perspective( 300px ) rotateY( 45deg );
-ms-transform: perspective( 300px ) rotateY( 45deg );
-o-transform: perspective( 300px ) rotateY( 45deg );
transform: perspective( 300px ) rotateY( 45deg );

Perspective to the right:

-webkit-transform: perspective( 300px ) rotateY( -45deg );
-moz-transform: perspective( 300px ) rotateY( -45deg );
-ms-transform: perspective( 300px ) rotateY( -45deg );
-o-transform: perspective( 300px ) rotateY( -45deg );
transform: perspective( 300px ) rotateY( -45deg );

DEMO

The magic is happening thanks to perspective and rotate, which you can read more about for example here: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective.

Answer 2

The key is to use the perspective CSS3 transform property. The MDN Docs for perspective give a good definition of how this property is to be used

Perspective:
The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

Basically, the smaller the value of perspective (i.e. the closer the viewer is perceived to be from the DOM element), the greater the effect of the transformations (e.g. rotateX)

Here's a fiddle showing a few 3D transforms in action. You should also check out this great article which demonstrates several different transformations you can do using CSS3 3D transforms: An Introduction to CSS 3-D Transforms

Given the following HTML:

<div class="rotate-left"></div>
<div class="rotate-up"></div>
<div class="rotate-right"></div>

You want to give your element the following properties:

.rotate-left {
    -webkit-transform: perspective( 500px ) rotateY( 35deg );
    -moz-transform: perspective( 500px ) rotateY( 35deg );
    -ms-transform: perspective( 500px ) rotateY( 35deg );
    -o-transform: perspective( 500px ) rotateY( 35deg );
    transform: perspective( 500px ) rotateY( 35deg );
}

.rotate-right {
    -webkit-transform: perspective( 500px ) rotateY( -35deg );
    -moz-transform: perspective( 500px ) rotateY( -35deg );
    -ms-transform: perspective( 500px ) rotateY( -35deg );
    -o-transform: perspective( 500px ) rotateY( -35deg );
    transform: perspective( 500px ) rotateY( -35deg );
}

.rotate-up {
    -webkit-transform: perspective( 500px ) rotateX( 35deg );
    -moz-transform: perspective( 500px ) rotateX( 35deg );
    -ms-transform: perspective( 500px ) rotateX( 35deg );
    -o-transform: perspective( 500px ) rotateX( 35deg );
    transform: perspective( 500px ) rotateX( 35deg );
}

Answer 3

You are looking to modify the 'perspective' of your images.

If you wanted to update the look of an image similar to one of the images in your example, you are going to want to do a mixture of rotateY() and perspective.

<img class="kitten" src="http://placekitten.com/200/200"/>

.kitten {
    -webkit-transform: perspective( 1000px ) rotateY( 45deg );
}

Check out this jsfiddle: http://jsfiddle.net/stat30fbliss/y2j4x/2/

Also worth checking out this CSS Tricks Article: http://css-tricks.com/almanac/properties/p/perspective/

As for modifying the perspective of the image based on scrolling or something along those lines, you will need some javascript computations that will produce the perspective and rotateY values.