YiDaoJ's Blog

CSS transform (2)

Posted on | In |

So… erkläre ich über 2D Skew und Kombination der Transformation weiter. :p

2D Skew

Ähnlich wie translate() und scale(), skew() kann auch mit skewX() und skewY() benutzt, um das Verzerren in horizontaler und vertikaler Richtung zu ermöglichen.

  • Die Einheit zu skew() ist auch degree.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box1 {
  transform: skewX(30deg);
}
.box2 {
  transform: skewX(-20deg);
}
.box3 {
  transform: skewY(40deg);
}
.box4 {
  transform: skewY(-20deg);
}
.box5 {
  transform: skew(20deg, 20deg);
}

Demo:

Kombination der Transformation

Es ist üblich, dass mehrere transform-Eigenschaften auf einmal benutzt werden, indem die Eigenschaften mit Werten nacheinander codiert werden.

Demo:

1
2
3
4
5
6
7
8
9
10
11
12
.box1 {
  transform: scale(.5) rotate(45deg);
}
.box2 {
  transform: scaleX(.75) skewX(20deg);
}
.box3 {
  transform: translateY(80px) scaleY(.6) rotate(45deg);
}
.box4 {
  transform: skew(20deg, 20deg) scale(.5, .5);
}
  • Alle transform-Property werden in einer Anweisung/Deklaration geschrieben, endet mit eine Semikolon.
  • Verbindung der Eigenschaften mit leerzeichen, sondern nicht Komma.
  • Wenn mehrere transform-Anweisungen deklariert werden, wrid nun die letzte realisiert. Alle vorherige gleichnamige (hier: transform) Deklarationen lassen sich verdecken.