Wie viele Arten von 2D-Verformungen gibt es in CSS3?

Es gibt 4 Arten von 2D-Verformungen in CSS3: 1. Displacement translator(), verschiebt das Element um eine bestimmte Distanz in horizontaler oder vertikaler Richtung 2. Scale(), skaliert das Element horizontal oder vertikal 3. Rotaterotate(; ), können Sie das Element drehen; 4. Skew(), Sie können das Element neigen.

【Empfohlenes Tutorial: CSS-Video-Tutorial】

Transformation ist eine der disruptiven Funktionen in CSS3, die die Verschiebung, Drehung, Verformung und Skalierung von Elementen realisieren kann und sogar den Matrixmodus mit Übergang unterstützt und Das Animationswissen, das Sie erlernen werden, kann eine Vielzahl von Effekten ersetzen, die bisher nur mit Flash erzielt werden konnten. 1. Move Translate(x, y)

Sie können die Position des Elements ändern, x und y können negative Werte sein;

translate(x,y) bewegt sich gleichzeitig horizontal und vertikal (das heißt, die X-Achse und die Y-Achse bewegen sich gleichzeitig). Zeit)

translatorX(x) nur horizontal gerichtete Bewegung (X-Achsen-Bewegung) translatorY(Y) bewegt sich nur in vertikaler Richtung (Y-Achsen-Bewegung)

translate(50px,50px);

Lassen Sie die positionierte Box horizontal zentriert sein

2 . Skalierung (x, y)

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

kann Elemente horizontal und vertikal skalieren. Diese Anweisung verwendet die Skalierungsmethode, um das Element in horizontaler Richtung um 20 % zu verkleinern und skaliert nicht in vertikaler Richtung.

scale(X,Y) skaliert das Element gleichzeitig horizontal und vertikal (d. h. die X-Achse und die Y-Achse skalieren gleichzeitig).

scaleX(x)-Element skaliert nur horizontal (X-Achsen-Skalierung)

scaleY(y)-Element Nur vertikale Skalierung (Y-Achsen-Skalierung)

Der Standardwert von scale() ist 1. Wenn der Wert auf einen beliebigen Wert zwischen 0,01 und 0,99 eingestellt ist, wird ein Element verkleinert; größer oder gleich 1,01 Wert, die Funktion besteht darin, das Element zu vergrößern

3. Drehen rotieren (Grad)

kann das Element drehen, positiver Wert ist im Uhrzeigersinn, negativer Wert ist gegen den Uhrzeigersinn

rrree

Wenn das Element gedreht wird, ändert sich auch die Koordinatenachse entsprechend.

Durch Anpassen der Reihenfolge kann das Problem gelöst werden, indem die Drehung am Ende platziert wird.

Beachten Sie, dass die Einheit Grad Grad ist 4. Skew (deg, deg)

transform:scale(0.8,1);

In diesem Beispiel wird die Skew-Methode verwendet, um das Element horizontal um 30 Grad zu neigen, während die Entsorgungsrichtung unverändert bleibt.
kann das Element in einem bestimmten Winkel neigen und ein negativer Wert sein. Wenn der zweite Parameter nicht geschrieben wird, ist er standardmäßig 0.

• transform-origin kann den Ursprung der Elementtransformation anpassen

transform:rotate(45deg);

Transform-move

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加过渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}

Das positionierte Feld ist perfekt zentriert und geschrieben Stellen Sie das Verformungszentrum ein Punkt

transform:skew(30deg,0deg);

Bilder drehen

p{transform-origin: left top;transform: rotate(45deg); }  
/* 改变元素原点到左上角，然后进行顺时旋转45度 */

Weitere Kenntnisse zum Thema Programmierung finden Sie auf:

Website zum Programmierenlernen

! !

Das obige ist der detaillierte Inhalt vonWie viele Arten von 2D-Verformungen gibt es in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!