srpen 14, 2014
Napsal(a) Václav
Zveřejněno v IT blog
Číst 11136 krát
Tisk

Rotace textu o 90 stupnů ve formuláři ^Doporučený

(Čtení tohoto článku zabere přibližně: 1 minutu.)

Dnes jsem řešil pro klienta interaktivní formulář pro hliníkové profily. Grafik to navrhnul, já nachystal technicky. Klient chtěl ale zapisovat hodnoty otočené o 90 stupňů. Musím se přiznat, že prvně jsem s tímto rozlišení moc nesouhlasil, ale výsledek není špatný.

Prvně jsem musel připravit třídu pro otočení o 90%. To se bohužel řeší pro každý prohlížeč samostatným zápisem. Právě to byl důvod, proč jsem se rozhodl zde tuto rotaci více rozepsat.

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

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

/* Opera */
-o-transform: rotate(-90deg);

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

}

Jak vidíte, Internet Explorer má zase speciální zápis. Hodnoty 0, 1, 2, 3 odpovídají rotaci o 0, 90, 180, 270 stupňů.

Výsledek:

Výsledek mě samotného překvapil, nyní čekám co klient, ale především co návštěvníci webu, protože to bude to nejdůležitější. Což mi připomíná .. musím zanášet do Google Analytics.

Sledujte nás na Facebooku

Další úryvky kódu na Twitteru

Označeno v