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)
This was posted by Jan Hansen, created on Thursday, January 21, 2016 Tag permalinket. Follow comments here by RSS feed til dette indlæg. You can post a comment.

Comment