C# - Tetszőleges HTML objektum elforgatása 90 fokkal

forráskód letöltése
Ha egy web lapon úgy szeretnénk szöveget megjeleníteni, hogy az legyen mondjuk 90 fokkal elforgatva, akkor általános megoldásként azt szokás alkalmazni, hogy készítünk egy képet, mely tartalmazza ezt a szöveget, melyet forgatunk a szükséges mértékben. Ennek a módszernek több hátránya is van: a kép állomány letöltéséhez biztos, hogy nagyságrenddel több idő kell, mint egy néhány karakteres szöveghez. További gond az is, hogy ha dinamikusan változna a feliratunk, akkor előre el kell készítenünk az összes szükséges szöveget kép formájában.
Sokkal jobb megoldás lenne, ha a web lapon megadhatnánk, hogy milyen mértékben kerüljön elforgatásra egy adott szöveg, vagy akár egy tetszőleges HTML objektum.
Mellékelt példa megnyitása előtt szükséges egy AngleObject nevű virtuális könyvtár létrehozása, mely a mellékelt példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megvalósításhoz egy speciális filter-t kell alkalmaznunk, melyet az Internet Explorer 5.5-ös verziójától kezdve használhatunk.
Ez a filter a Matrix lesz, mely képes nem csak elforgatni egy-egy objektumot, de más műveleteket is végezhetünk vele, mely lehet nagyítás, kicsinyítés, torzítás, stb.
A mellékelt StyleSheet1.css-ben létrehozunk két új stílust, mellyel 90 és 270 fokkal forgatható el egy tetszőleges HTML objektum. A felhasználásukkor csupán annyi a teendőnk, hogy a CssClass property-be megadjuk a szükséges stílus nevét.
.angle270
{
  filter:progid:DXImageTransform.Microsoft.Matrix(M11='-0.01836909530733566', M12='1', M21='-1', M22='0.01836909530733566', sizingmethod='auto expand');
}
.angle90
{
  filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.006123031769111886', M12='-1', M21='1', M22='0.006123031769111886', sizingmethod='auto expand');
}