Einige Verformungsverarbeitungen in CSS3-HTML-Tutorial-php.cn

Einige Verformungsverarbeitungen in CSS3

零下一度

Freigeben： 2017-06-28 09:25:47

Original

1402 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!