CSS Transform Rotate

层叠样式表 (CSS) transform rotate 有助于操作和旋转图像、数据块以及其他动画容器。 rotate 属性是 transform 属性的一部分。 transform 属性为图像或容器提供许多视觉效果。 rotate 属性用于围绕中心或自身旋转元素。

transform 属性包含带角度的 rotate 属性。我们可以使用顺时针和逆时针方向的角度。有时，transform 属性会使用带角度的水平和垂直旋转属性。

基本 CSS Transform 旋转

基本的 CSS transform "rotate" 属性以顺时针或逆时针方向旋转容器或图像。

语法

以下语法使用 CSS 中的 transform rotate 属性以及不同的旋转属性。

描述

• 角度是 transform-rotate 属性的必需参数。
• 我们可以在角度参数中使用正值和负值。

示例

以下示例显示了容器的图像或数据在不同方向上的旋转。

示例 1

以下示例显示了容器沿正方向旋转。

输出

输出显示了容器的旋转。

示例 2

以下示例显示了容器沿负方向旋转。

输出

输出显示了容器的旋转。

示例 3

以下示例显示了带悬停效果的容器旋转。

输出

输出显示了容器的旋转。

CSS 3D Transform 旋转

基本的 CSS transform rotate 属性将容器或图像旋转到 3D 旋转所需的方向。

语法

以下语法使用 transform rotate 属性进行 3D 旋转。

描述

• x、y 和 z 是图像或容器的轴。值必须是数字格式。
• 角度显示带轴的负值或正值。
• 需要三个轴数字和角度。
• CSS 中需要带 rotate3d() 属性的 transform 才能进行 3D 旋转。

示例

以下示例显示了不同 x、y 和 z 轴的方向。

示例 1

以下示例显示了沿正方向进行 3D 旋转的容器。我们可以设置带正角度的正轴或负轴。

输出

输出显示了容器的 3D 旋转。

示例 2

以下示例显示了沿负方向进行 3D 旋转的容器。我们可以设置带负角度的正轴或负轴。

输出

输出显示了容器的 3D 旋转。

示例 3

以下示例显示了带悬停效果的容器 3D 旋转。

输出

输出显示了容器的 3D 旋转。

基本 CSS Transform 旋转轴

CSS transform rotate 属性将容器或图像沿 x、y 和 z 轴旋转。

语法

以下语法使用 transform rotate 属性进行带轴的 3D 旋转。

描述

• AXIS 指的是图像或信息容器的 X、Y 或 Z 轴。
• 我们可以将角度设置为负值或正值，但这不会影响 x 轴和 y 轴。
• CSS 中需要带 rotateX|Y|Z() 属性的 transform。

示例

rotate 属性使用特定轴进行顺时针或逆时针旋转。方向不影响 rotateAXIS() 方法。

示例 1

以下示例显示了信息标签在所需方向上进行 3D 旋转。我们可以将 x 轴设置为所需角度。

输出

输出显示了容器在 x 轴上的旋转。

示例 2

以下示例显示了信息标签在所需方向上进行 3D 旋转。我们可以将 Y 轴设置为所需角度。

输出

输出显示了容器在 Y 轴上的旋转。

示例 3

以下示例显示了信息标签在所需方向上进行 3D 旋转。我们可以将 z 轴设置为所需角度。

输出

输出显示了容器在 z 轴上的旋转。

示例 4

以下示例显示了带悬停效果的容器 3D 旋转。我们可以使用 x、y 和 z 轴进行悬停旋转。

输出

输出显示了带轴的容器 3D 旋转。

结论

CSS transform rotate 有助于设计和放置标签，以创建具有角度的吸引人的功能。它有助于以所需角度显示设计和形状，并带有 rotate 属性。