Text rotated by 90° using only CSS

Question

Is it possible to rotate text by 90° (clockwise or counter-clockwise) using only CSS and compatible with IE6+, Firefox 2 and Opera?

duplicate of http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser/ — Esteban Küber, Sep 22 '09 at 23:25

score 4 · Accepted Answer · edited May 23 '17 at 12:13

4

How can I draw vertical text with CSS cross-browser?

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  -o-transform: rotate(270deg);
  -o-transform-origin: 50% 50%;
  transform: rotate(270deg);
  transform-origin: 50% 50%;

  /* IE<9 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

IE<9 Rotation property for BasicImage filter.

edited May 23 '17 at 12:13

Community

1
1

answered Sep 22 '09 at 23:24

Esteban Küber

36,388
15
79
97

pretty cross browser: >= ie6, >= ff2, and webkit – Gordon Gustafson Sep 23 '09 at 00:49

score 1 · Answer 2 · answered Sep 22 '09 at 23:20

1

The BasicImage filter in IE can do that: http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx

answered Sep 22 '09 at 23:20

lod3n

2,893
15
16

pretty sure that's not compatible with Firefox 2 or Opera – Colin Coghill Sep 23 '09 at 00:06
The original version of the question only specified IE6 and later. – lod3n Sep 23 '09 at 00:17
@colin.coghill: its still a valid answer, just not a complete answer. On firefox and webkit is easier. Opera is tougher. – Esteban Küber Sep 23 '09 at 00:58

Text rotated by 90° using only CSS

2 Answers2