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;

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

translate(50px,50px);

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

Nach dem Login kopieren

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.

scaleX(x)-Element skaliert nur horizontal (X-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)

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);

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);
}

Nach dem Login kopieren

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

transform:skew(30deg,0deg);

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

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!