So verwenden Sie Transformation in CSS

Das Transformationsattribut in CSS kann das Erscheinungsbild von Elementen manipulieren, einschließlich: Translate(): Element verschieben, Rotate(): Element drehen, Scale(): Element skalieren, Skew(): Element verzerren, Matrix(): Element verwenden Matrix zum Definieren einer benutzerdefinierten Transformationsperspektive (): Erstellen Sie 3D-Effekte Auswirkungen auf seine Größe oder Position. Es wird durch eine Reihe von Transformationsfunktionen implementiert, darunter:

Übersetzung, Drehung und Skalierung

• translate(): Elemente verschieben.

• rotate(): Elemente drehen.
• scale(): Elemente skalieren.

transform 是 CSS 中用于操纵元素的外观，而不会影响其尺寸或位置的一个强大的属性。它通过一系列变换函数来实现，包括：

平移、旋转和缩放

• translate()：移动元素。
• rotate()：旋转元素。
• scale()：缩放元素。

示例：

/* 将元素向右移动 50px */
transform: translate(50px);

/* 顺时针旋转元素 30 度 */
transform: rotate(30deg);

/* 将元素放大到原始尺寸的 2 倍 */
transform: scale(2);

复合变换

transform 属性可以组合多个变换函数，以实现更复杂的效果。

示例：

/* 同时向右移动元素 50px 并将其向上旋转 30 度 */
transform: translate(50px) rotate(30deg);

变形

transform 也可用于变形元素，从而创建视觉上独特的形状。

• skew()：扭曲元素。
• matrix()：使用矩阵定义自定义变换。

示例：

/* 向右倾斜元素 10 度 */
transform: skew(10deg);

/* 使用矩阵定义自定义变换 */
transform: matrix(1, 0, 0.5, 1, 0, 0);

透视

transform 中的透视属性允许创建 3D 效果，使元素看起来具有深度。

示例：

/* 设置元素的透视，使其看起来具有深度 */
transform: perspective(500px);

/* 沿 z 轴旋转元素 */
transform: perspective(500px) rotateZ(30deg);

注意：

• transform 不会影响元素在文档流中的位置。
• 浏览器对 transform 属性的支持程度有所不同。
• 使用 transformBeispiel:
rrreee🎜🎜Zusammengesetzte Transformation🎜🎜🎜 Das Attribut transform kann mehrere Transformationsfunktionen kombinieren, um komplexere Effekte zu erzielen. 🎜🎜🎜Beispiel: 🎜🎜rrreee🎜🎜Transformieren🎜🎜🎜transform kann auch zum Transformieren von Elementen verwendet werden, wodurch optisch einzigartige Formen erstellt werden. 🎜
• skew(): Elemente verzerren. 🎜
• matrix(): Verwenden Sie Matrizen, um benutzerdefinierte Transformationen zu definieren. 🎜🎜🎜🎜Beispiel: 🎜🎜rrreee🎜🎜Perspektive🎜🎜🎜 Die Eigenschaft „Perspektive“ in transform ermöglicht die Erstellung eines 3D-Effekts, der Elementen Tiefe erscheinen lässt. 🎜🎜🎜Beispiel: 🎜🎜rrreee🎜🎜Hinweis: 🎜🎜
  • transform hat keinen Einfluss auf die Position des Elements im Dokumentenfluss. 🎜
  • Die Browserunterstützung für das Attribut transform variiert. 🎜
  • Die Leistung kann bei der Verwendung von transform beeinträchtigt werden, insbesondere beim Animieren komplexer Transformationen. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Transformation in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!