0

We have been trying to rotate a textbook at an angle(45,90,270 etc) on an aspx webform. I read that html won't support such a property, so we would have to include a CSS class property to the textbox. Is there a property to include an angle in a CSS class? We are using html 4.

user997805
  • 3
  • 5

2 Answers2

1

Simple CSS will allow you to rotate any element in modern browsers:

transform: rotate(45deg);

This is a fairly new feature, and a lot of browsers support it, but require a vendor prefix, so you should also specify -moz-transform, -webkit-transform, -ms-transform, so your full CSS will look like this:

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

This will support all browsers in common use except IE8 or earlier.

Old IE versions can rotate items, but it's much more difficult. You need to use the filter style, but it requires angles in radians and complex matrix formulae. There is an answer here that describes it in more detail.

However, you could use a javascript library called CSS Sandpaper. Then you can simply use this for old IE versions:

-sand-transform: rotate(45deg);

Add the above line to the CSS block I gave you earlier, and include the CSS Sandpaper javascript library in your HTML page.

Hope that helps.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
0
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
writing-mode: tb-rl;

for IE support to angle like 270 etc

  /* Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

 -ms-transform:rotate(270deg); /* IE 9 */

filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively

Shafqat Masood
  • 2,532
  • 1
  • 17
  • 23