您如何使用变换属性旋转，扩展，翻译和偏斜元素？-css教程-PHP中文网

您如何使用变换属性旋转，扩展，翻译和偏斜元素？

Mar 20, 2025 pm 03:41 PM

CSS中的transform属性是一种强大的工具，用于修改元素的视觉外观而不破坏正常文档流程。您可以将其用于不同类型的转换的方法：

旋转：
rotate功能使您可以在固定点旋转元素（默认情况下，元素的中心）。您以度，Gradians，Readians或turn的程度指定旋转角度。例如：
```
 <code class="css">transform: rotate(45deg);</code>
```
这将使元素顺时针旋转其中心。
规模：
scale功能会更改元素的大小。它可以采用一个或两个值；一个值在水平和垂直方面均缩放，而两个值则水平和垂直缩放。例如：
```
 <code class="css">transform: scale(2, 0.5);</code>
```
这将使元素宽两倍，一半是高的。
翻译：
translate函数从其当前位置移动一个元素。它可以分别用于水平和垂直运动的两个值，或仅用于水平运动的单个值。例如：
```
 <code class="css">transform: translate(50px, 100px);</code>
```
这将使元素50像素向右移动，并将100像素向下移动。
偏斜：
skew函数沿X和Y轴偏向一个元素。像translate一样，它可以分别采用一个或两个值，分别影响水平和垂直偏斜。例如：
```
 <code class="css">transform: skew(30deg, 20deg);</code>
```
这将使沿X轴30度和沿Y轴20度的元素偏斜。

使用transform进行旋转与缩放率涉及不同的变换，并且对元素具有明显的影响：

旋转会影响元件的方向，而不会改变其在布局中的大小或位置。它将元素围绕一个点旋转，可以使用transform-origin属性更改该点。旋转对于创建动画或效果很有用，而元素绕枢轴点转动。
另一方面，缩放更改元素的大小。除非与翻译结合使用，否则它可以在不影响文档流中的位置，而不会影响其在文档流中的位置。缩放对于缩放效果或调整元素的大小很有用，而不会改变其布局影响。

这两种转换都可以平稳地动画，并且经常用于组合以创造复杂的效果。

在单个CSS规则中将多个变换函数组合起来很简单，但遵循特定顺序，重要的是要理解，因为每个函数都按顺序应用。操作顺序是：

例如，将元素扩展到其原始大小的两倍，然后将其旋转45度，最后将其移动100像素，您将写下：

 <code class="css">transform: scale(2) rotate(45deg) translate(0, 100px);</code>

该序列很重要，因为如果您在缩放之前旋转元素，则旋转角将应用于缩放尺寸，可能导致不同的视觉结果。

使用transform属性时，请考虑以下浏览器兼容性问题：

较旧的浏览器： CSS3的一部分的transform属性可能不支持旧版本的浏览器。例如，Internet Explorer支持从版本9开始的transform ，但它使用了不同的语法（ -ms-transform ）。对于较旧版本，您可能需要使用替代方法或后备。
供应商前缀：为了确保与不同的浏览器（尤其是较旧版本）的兼容性，您可能需要使用-webkit- -， -moz- ，-o-， -o-和-ms-等供应商前缀。例如：
```
 <code class="css">transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);</code>
```
3D变换：一些浏览器可能会出现3D变换的问题，尤其是较旧的移动浏览器。跨目标设备和浏览器进行测试至关重要。
性能：硬件加速度可以由transform属性触发，这对某些设备上的性能有益，但可能会导致其他设备的问题或不一致，尤其是在处理复杂的动画或众多元素时。