Rotace obsahu

V novějších prohlížečích (od Exploreru 9) lze pro otočení textu nebo jiného libovolného elementu použít CSS vlastnost transform: rotate(-90deg). Pro některé prohlížeče je nutné použít prefix.

Transformaci rotate nejde aplikovat na řádkové elementy (display: inline). Je potřeba nastavit block nebo inline-block.

Vlastnost transform-origin

Tato vlastnost umožní změnit střed otáčení. Výchozí je uprostřed (center center).

Kromě klíčových slov je možné zadávat offset v procentech (50% 50% odpovídá center center) nebo libovolných jiných jednotkách.

CSS filtr rotace pro starší prohlížeče

Pro starší Explorery je řešení ještě snazší — stačí pro otočení použít filtr.

element {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

Výsledek

Kód

Krásně zahnojený prefixy, ale měl by napříč prohlížeči zajisit svislé otočení textu.

element {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      =filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      width: 4em
    }

Filtr Matrix

Kromě toho podporují starší Explorerové filtr Matrix, kterým jde provést libovolnou 2D transformaci, tedy i otočení.

Existuje hezký nástroj, který umí CSS transformace převádět do IE a jeho Matrixu.

IE's CSS3 Transforms Translator

Odkazy

• Svislé záhlaví tabulek