Archive for tag: CSS

CSS rotation af indhold

Thursday, January 21, 2016

Nogle gange har man brug for at rotere indhold for at få en speciel effekt. Dette kan med CSS3 gøres ret let, hvis ellers browseren fatter CSS3.

Her rotetes et element 45 grader med uret:

.label {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft
           .Matrix(m11=0.71,m12=0.71,m21=0.71,m22=0.71);
}

NB: linjeskiftet er for at undgå koden flyder over i siden, det linjeskift skal fjernes, hvis du klipper koden ud og bruger i dit eget stylesheet.

Bemærk filter-reglen, som retter sig mod IE i tidligere versioner. Her er beregningen som følger:

m11 = sin (45 * pi / 180)
m12 = cos (45 * pi / 180)
m21 = cos (45 * pi / 180)
m22 = sin (45 * pi / 180)
By: Jan Hansen |Tagged: , | Comment