Transform除了旋转、偏移、缩放、倾斜这些transform-function外，本篇介绍另外剩余的边角料：基准点、透视、灭点等。

目录

基准点：transform-origin
透视属性：perspective
灭点位置：perspective-origin
呈现方式：transform-style
3D背面与否可见：backface-visibility

基准点：transform-origin

使用Transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行变形。使用transform-origin属性，可以改变变形的基准点。

（1）语法

transform-origin: x-axis y-axis z-axis;

共三个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离，第三个参数表示相对于Z 轴的距离。

前两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。第三个参数只能设置具体的像素值。

写法实例：

div{transform: rotate(45deg);transform-origin:20% 40%; 
-ms-transform: rotate(45deg); /* IE 9 */-ms-transform-origin:20% 40%; /* IE 9 
 
-webkit-transform: rotate(45deg); /*Safari 和 Chrome */-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
 -moz-transform: rotate(45deg); /* Firefox */-moz-transform-origin:20% 40%; /* Firefox */
 -o-transform: rotate(45deg); /* Opera */-o-transform-origin:20% 40%; /* Opera */}

当填一个值时，默认Y轴的值为50%，Z轴的值可以忽略不写。

透视属性：perspective

transform的值包含了一系列变换函数（transform function）,其中一部分变换函数会产生三维变换，但只应用transform function是不能得到可用的三维变换效果的，还需要理解并使用其他和三维变换有关的CSS属性。

正确的三维效果，是建立在一定的透视变化基础上的。所谓透视变化，就是指以人眼看实际的景物时会有的“近大远小”的效果。此外，还有一个概念是灭点（vanishing point）。

当景物离自己的位置越远时，就会越趋于集中到某一个点上。这个点就是灭点，它对于建立三维效果是非常关键的。

现在再来考虑网页中的三维效果。请不要认为网页真的可以把元素排列在离屏幕前的你不同距离的位置(￣Д￣lll)。网页仍然只会显示在你眼前的屏幕上，其中的元素仍然位于同一平面。但是，元素会依照自己在虚拟三维空间中的位置，调整自己的位置和尺寸，从而创造出正确的三维效果。这个从虚拟三维空间转换到平面中的显示过程，也常称为投影。

perspective就是控制这个投影的参数。它表示的是假想的观察点到元素的绘制平面（也就是显示网页的平面）的距离，浏览器会根据这个距离值，以及元素的Z轴坐标，计算出用于投影缩放的比例。

下图中的d对应的就是perspective的值：

这就是透视变化的“近大远小”的效果原理。因此要产生三维效果，必须要指定perspective。这个参数有两种指定方法。

（1）语法

.aya{perspective:2000px;}//写法一.aya{transform:webkit-perspective(2000px);}//写法二

2000px数值，代表人眼到透视物体的距离，值越大，透视越不明显，值越小，透视越明显。perspective的值必须为正数（也就是说，不包括0）。

这两种指定方法是很有区别的。当perspective作为transform的一个变换函数使用时，也就是第二种写法时，透视变化只作用于应用了此变换的单一元素。而使用perspective属性的写法，也就是第一种写法时，则一般用在需要三维变换的多个元素的父元素上(这点要注意)。

它会使对应元素的子元素共享同一个透视变化（包括灭点位置）。也就是说，第一种的这个写法的CSS要写在父元素上，但是作用在子元素上。此外，当使用perspective属性时，还可以使用perspective-origin属性修改透视变化中的灭点的位置（默认是中心点）。

（2）实例

（3）浏览器支持
目前主流的浏览器都不支持 perspective 属性。需要使用浏览器私有前缀。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

灭点位置：perspective-origin

（1）语法

perspective-origin: x-axis y-axis;

（2）实例

其中当为元素定义perspective-origin属性时，其子元素会获得透视效果，而不是元素本身。所以要为元素定义perspective-origin属性时，要在其父元素上定义该属性。该属性必须与perspective属性一同使用，perspective也要定义在父元素上，而且只影响 3D 转换元素。另外，不管是perspective还是perspective-origin都要设置浏览器的私有前缀，比如-webkit-perspective；以及-webkit-perspective-origin。

（4）浏览器支持
目前主流浏览器都不支持 perspective-origin 属性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

呈现方式：transform-style

该属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。

（1）语法

transform-style: flat|preserve-3d;

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转，该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。

如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

（2）实例

3D背面与否可见：backface-visibility

（1）语法

backface-visibility:visible|hidden;

（2）实例

后记：这是原文地址《CSS3新特性(01)：Transform（下）》，欢迎来我个人博客逛逛！

作者：荷小音
链接：https://www.jianshu.com/p/6fb15b03207d