Text Rotation via CSS

css · html

Text-Rotation via CSS geht auch im Internet Explorer.

Für Webkit und Firefox reicht die Angabe der transform-Eigenschaft um Elemente zu drehen.

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

Für den IE benutzt man den Filter BasicImage, um Elemente zu drehen:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Beispiel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<style>
#transformouter{position:relative}
#answer{font-size:80px;position:relative;top:20px;left:50px;}
#desc1 {
  position:absolute; 
  left:-40px; top:60px;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);	
}
#desc2 {
  position:absolute; 
  left:100px; top:80px;
  -webkit-transform: rotate(-270deg); 
  -moz-transform: rotate(-270deg);	
}
</style>
<!--[if IE]>
<style>
  #desc1 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    left:0px; top:0px;
  }
  #desc2 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    left:180px; top:0px;
  }
</style>
<![endif]-->

<div id="transformouter">
	<div id="desc1">answer to life the</div>
	<div id="answer">42</div>
	<div id="desc2">universe and everything</div>
</div>
Teilen