CSS: Zrcaljenje in rotacija slike

S pomočjo CSSja lahko slike tudi zrcalimo oziroma rotiramo(vrtimo). Uporabno predvsem v primerih, ko lahko eno grafiko uporabimo v različnih primerih, npr. puščica, ki ponazarja smer levo in ob zrcaljenju desno.

Zrcaljenje s pomočjo CSS kode


.imeClass-a {
-moz-transform: scaleX(-1); /* Mozilla */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Safari, Chrome */
transform: scaleX(-1); /* Standardna znaèka */
filter: FlipH; /* IE */
-ms-filter: "FlipH"; /* IE */
}

Rotacija s pomočjo CSS kode


.imeClass-a {
-moz-transform: rotate(-90deg); /* Mozilla */
-webkit-transform: rotate(-90deg); /* Safari, Chrome */
-o-transform: rotate(-90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE Uporaba:1,2,3,4; 2= 180' */
}

Problem, ki se lahko pojavi, seveda v IE brskalnikih je pri PNG slikah, ki uporabljajo transparentno ozadje. Transparente ali delno transparente slike se namreč obarvajo v črno.

Komentiraj


*