Heim > Artikel > Web-Frontend > Einige Verformungsverarbeitungen in CSS3
Einige Verformungsverarbeitungen in CSS3
- 零下一度Original
- 2017-06-28 09:25:471345Durchsuche
Verformungsklassifizierung
-
Skalierung
Verwenden Sie die Skalierungsmethode, um Text oder Bilder zu skalieren, und geben Sie das Skalierungsverhältnis in den Parametern an. „Skalieren (0,5)“ bedeutet beispielsweise das Verkleinern um 50
-
Neigung
Verwenden Sie die Skew-Methode, um Text oder Bilder zu skalieren, und geben Sie den horizontalen Neigungswinkel an Parameter Der Neigungswinkel zur vertikalen Richtung. Wenn es nur einen Wert gibt, ist es der Neigungswinkel zur horizontalen Richtung. Die Einheit ist Grad.
Hinweis: Drehen bedeutet Drehung, es gibt nur einen numerischen Wert, der den Drehwinkel in horizontaler Richtung angibt.
-
Verschieben
Verwenden Sie die Übersetzungsmethode, um Text oder Bilder zu verschieben. Wenn es nur einen Wert gibt, dann für horizontal Bewegung.
Mehrere Transformationsmethoden für ein Element
Formatbeispiel
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <section id="a-section1-3-b">a-section1-3-b</section>11
<section id="section1-4-b">section1-4-b</section>12 <style>13
[id $= 'b']{ /* id以b结尾的 */14 background-color: lightpink;15
-webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);16
-moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);17
-ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);18
-o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);19
transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);20
/*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/21 }22
#a-section1-3-b{23 -webkit-transform-origin: left bottom;24
-moz-transform-origin: left bottom;25 -ms-transform-origin: left bottom;26
-o-transform-origin: left bottom;27 transform-origin: left bottom;28
/*更换变形原点*/ }
</style>
</body>
</html>Transformations-Basispunkt-Transformationsursprung
Dieser Parameter kann den Verformungsbasispunkt ändern und sein Attributwert stellt „die Position des Basispunkts in der horizontalen Richtung des Elements und die Position des Basispunkts in der vertikalen Richtung des Elements“ dar. Unter diesen sind die Werte, die in „Die Position des Referenzpunkts in der horizontalen Richtung des Elements“ angegeben werden können, links, in der Mitte und rechts, und die Werte, die in „Die Position des“ angegeben werden können „Bezugspunkt in vertikaler Richtung des Elements“ sind oben, in der Mitte und unten.
Das obige ist der detaillierte Inhalt vonEinige Verformungsverarbeitungen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!