CSS转变使用 | CSS Transforms: Using CSS transforms

通过修改坐标空间，CSS transforms可以改变受影响的内容的形状和位置，而不会中断正常的文档流。本指南提供了转换的使用介绍。

CSS转换是使用一组CSS属性实现的，这些属性可以将仿射线性转换应用到HTML元素。这些转换包括在平面和三维空间中的旋转，倾斜，缩放和平移。

CSS转换属性

两个主要属性用于定义CSS转换：transform和transform-origin

transform-origin——指定原点的位置。默认情况下，它位于元素的中心，可以移动。它被几个转换使用，如旋转，缩放或倾斜，需要一个特定的点作为参数。

transform——指定应用于元素的变换。这是由一个空格分隔的变换列表，按照合成操作的要求，一个接一个地应用变换。复合变换按从右到左的顺序进行应用。

实例

MDN的logo的原始图象：

旋转

以下是iframe中的MDN的logo，从左下角旋转90度。

<img style="transform: rotate(90deg); transform-origin: bottom left;" 
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

倾斜和平移

这里是MDN的logo，倾斜10度，在X轴上平移150像素。

<img style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;"
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

3D空间上特定的CSS属性

在3D空间中执行CSS转换有点复杂。您必须先从透视角度来配置3D空间，然后您必须配置2D元素在该空间中的行为方式。

建立一个透视图

要设定的第一个要素是视角。这个角度给了我们三维印象。元素越远离观察者越小。

它们缩小的速度是由perspective属性定义的。值越小，视角越深。

perspective:0;	perspective:250px;
1 2 3 4 5 6	1 2 3 4 5 6

perspective:300px;	perspective:350px;
1 2 3 4 5 6	1 2 3 4 5 6

第二个要配置的元素是查看器的位置和perspective-origin属性。默认情况下，透视图以查看器为中心，但这并不总是合适的。

perspective-origin:150px 150px;	perspective-origin:50% 50%;	perspective-origin:-50px -50px;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6

一旦完成此操作后，可以在3D空间中处理元素了。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18