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

CSS Transforms: Using CSS transforms

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

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

CSS转换属性

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

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

实例

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-origin属性。默认情况下，透视图以查看器为中心，但这并不总是合适的。

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