CODEWITHSUNDEEP
jqueryrotation
Keith Palmer Jr.
Keith Palmer Jr.

Reputation: 27952

jQuery - Rotate an image by a static amount, and then apply a drop shadow?

Can anyone give me a jQuery example of how to:

  1. Rotate an image by a static number of degrees (say 30 degrees)
  2. Apply a drop-shadow effect to the rotated image

Upvotes: 1

Views: 359

Answers (2)

Keith Palmer Jr.
Keith Palmer Jr.

Reputation: 27952

@genesis' answer doesn't seem to support Internet Explorer, as the DXImageTransform.Microsoft.BasicImage(rotation=) parameter only supports 90, 180, and 270 degree increments (docs here: http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx.

A better solution I've found is to use a combination of @genesis' answer, and a jQuery plugin found here: http://code.google.com/p/jqueryrotate/

Use the jQuery code to rotate the image by whatever amount:

$('#photo1').rotate(-8);

And then use this modification of @genesis' code to apply the drop-shadow:

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-box-shadow:2px 2px 4px #999999;
-webkit-box-shadow:2px 2px 4px #999999;

The modification doesn't include this line:

box-shadow:2px 2px 4px #999999;

Because including that line gets you an ugly black background in Internet Explorer for some reason. It seems to work fine without it.

Upvotes: 0

genesis
genesis

Reputation: 50976

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-box-shadow:2px 2px 4px #999999;
-webkit-box-shadow:2px 2px 4px #999999;
box-shadow:2px 2px 4px #999999;

will do it

Upvotes: 2

Related Questions