Efekt rotace (CSS3 vlastnost transform). Zatím nefunguje nikde.
Firefox minim. 3.5 ale podporuje "testovací" vlastnost -moz-transform, Google Chrome a Safari vlastnost -webkit-transform, Opera -o-transform.
V Exploreru lze obdobný efekt řešit filtrem rotation.
Pro obrázky funguje rotace stejně jako pro libovolný box.
<div style="transform: rotate(-90deg)"></div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace pro Firefox
<div style="-moz-transform: rotate(-90deg)"></div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace pro Operu
<div style="-o-transform: rotate(-90deg)"></div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace pro Safari a Chrome
<div style="-webkit-transform: rotate(-90deg)"></div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace pro Explorer
<div style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"></div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace pro všechny prohlížeče
.rotace
{ width:200px; height:200px;
border: 1px solid blue;
padding: 10px;
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div class="rotace"> </div>
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
Efekt rotace (CSS3 vlastnost transform).
.....
Rotace u obrázku