user3547811 user3547811 -4 years ago 177
CSS Question

CSS3 image rotate

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download