Welche Art von Verformungsfunktion enthält CSS3?

Die Verformungsfunktion von CSS3 umfasst 4 Typen: 1. Rotation, implementiert mit Rotate(), RotateX() usw.; 2. Skalierung, implementiert mit Scale(), ScaleX() usw.; mit skew(), implementiert durch skewX() usw.; 4. Bewegung, implementiert durch translator() usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Der Hauptwert der Verformung besteht darin, mithilfe der Transformationsfunktion die vier Prozesse Drehen, Skalieren, Neigen und Bewegen von Text oder Bildern zu realisieren.

1. Rotation-----transform:rotate(xxdeg);

( IE9 oder höher, Safari 3.1 oder höher, Chrome 8 oder höher, Firefox 4 oder höher, Opera 10 oder höher alle Unterstützung Diese Attribute)

Schauen wir uns zunächst das Beispiel an:

<p id="test3">
     这是一个测试。
</p>
#test3{
     width:300px;
     margin: 100px auto;
     font-size: 40px;
     transform:rotate(45deg);
      }

transform:rotate(45deg); Dieser Satz bedeutet, dass das p-Element um 45 Grad im Uhrzeigersinn gedreht wird und Grad eine Winkeleinheit ist. Der Effekt ist wie folgt:

2. Scale-----transform:scale(x)

<p id="test4">
        这是一个测试。
</p>

 #test4{
          width:300px;
          margin: 100px auto;
          font-size: 40px;
          transform:scale(0.5);  
  }

Sie können die horizontale und vertikale Skalierung des Elements auch separat festlegen. Beispielsweise verkleinert sich das Element in horizontaler Richtung um 50 % und verdoppelt sich in vertikaler Richtung:

<p id="test5">
    这是一个测试。
</p>

#test5{
   width:300px;
   margin: 100px auto;
   font-size: 40px;
   transform:scale(0.5,2);  
}

Die Auswirkungen der beiden oben genannten Skalierungen sind wie folgt:

3. Skew: Verwenden Sie die Skew-Methode , um Wenn Sie Text oder Bilder neigen möchten, geben die beiden Parameter den Neigungswinkel in horizontaler Richtung bzw. den Neigungswinkel in vertikaler Richtung an. Beispiel:

<p id="test6">
    这是一个测试。
</p>

#test6{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:skew(30deg,45deg);      
 }

Wenn es nur einen Parameter gibt, wird dieser standardmäßig nur in horizontaler Richtung geneigt, nicht in vertikaler Richtung.

4. Bewegung: Verwenden Sie die Übersetzungsmethode, und die beiden Parameter geben die Bewegungsentfernung in horizontaler bzw. vertikaler Richtung an. Wenn nur ein Parameter vorhanden ist, wird standardmäßig nur in horizontaler Richtung und nicht in vertikaler Richtung verschoben.

<p id="test7">
        这是一个测试。
</p>

 #test7{
      width:300px;
      margin: 100px auto;
      font-size: 40px;
      transform:translate(150px,150px);  
 }

Diese Transformationen können auch kombiniert werden:

<p id="test8">
        这是一个测试。
</p>

#test8{
    width:300px;
    margin: 100px auto;
    font-size: 40px;
    transform:rotate(45deg) scale(0.5) skew(30deg,45deg) translate(150px,150px);      
  }

Drehen Sie das Element um 45 Grad im Uhrzeigersinn, verkleinern Sie es um die Hälfte, neigen Sie es dann horizontal um 30 Grad, vertikal um 45 Grad und verschieben Sie es horizontal bzw. vertikal um 150 Pixel. Der Effekt ist wie folgt :

Sie können den Basispunkt der Verformung angeben: Wenn Sie die Transformation zur Verformung verwenden, wird die Mitte des Elements als Basispunkt verwendet. Der Ursprung kann mit dem transform-origin-Attribut geändert werden.

<p id="test9">
    这是一个测试。
</p>

<p id="test10">
    这是一个测试。
</p>

#test9{
     position: absolute;
      width:150px;
      height:150px;
      background: green;
      margin: 100px 200px;
      font-size: 20px;
      transform:rotate(45deg);  
      }#test10{
      position: absolute;
      width:150px;
      height:150px;
      background: red;
      margin: 100px 200px;
      font-size: 20px;
      transform-origin:left top; /*定基准点*/
      transform:rotate(45deg)      
      }

Der Effekt ist wie folgt: (Rot bedeutet, den Referenzpunkt an den oberen linken Punkt zu verschieben, Grün ist die Standardeinstellung)

Der Wert des Transformations-Origin-Attributs, das erstere ist „die Position des“. Referenzpunkt in der horizontalen Richtung des Elements“, Die Werte, die angegeben werden können, sind: links, Mitte, rechts; der letztere Wert ist die „Position des Referenzpunkts in der vertikalen Richtung des Elements“, die Werte Folgende Werte können angegeben werden: oben, in der Mitte, unten.

(Freigabe von Lernvideos: CSS-Video-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonWelche Art von Verformungsfunktion enthält CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!