CSS3 transform介绍（详解）1前置属性

CSS里transform变形这个属性有点学习难度，尤其在CSS3里加上了3D效果之后，2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水，因为对页面效果爱的深沉。本篇就介绍一下transform。（擎天柱：Autobot transform!）

transform本质上是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲，matrix矩阵。戒骄戒躁，我们一个个讲。

• 前置属性：
• transform-origin
• transform-style
• perspective
• perspective-origin
• backface-visibility
• 2D变形：
• translate
• scale
• rotate
• skew
• matrix
• 3D变形：
• translate3d
• scale3d
• rotate3d
• matrix3d
• 层级影响
  前置属性
  transform-origin
  用于指定元素变形的中心点。默认中心点就是元素的正中心，即XYZ轴的50% 50% 0处。可以通过该属性改变元素在XYZ轴的中心点，正值表示正向位移，负值表示负向位移。（XYZ轴的正向分别是往右，往下，靠近用户眼睛。反之为反向）
  表示2维的x-offset/y-offset可以设px值也可以设%百分比，也可设top / right / bottom / left / center等keyword。表示3维的z-offset只能设px值，不能设%百分比，也没有keyword。

默认中心点在元素正中心，因此关键字top等价于top center等价于50% 0%（x轴仍旧留在50%处，y轴位移到0%处）。同理各关键字例如right等价于right center等价于100% 50%，不多赘述。

一图胜千言：为图片设置不同的中心点后，看它们旋转，扭曲，缩放的效果。例如图1表头的第一行center表示transform-origin: center。第二行rotate(30deg);表示transform: rotate(30deg);。

另外transform-origin指定变形中心点对translate位移没有影响。translate位移始终相对于元素正中心进行位移，有怀疑精神的可以自己试一下。

其实transform-origin只是一个语法糖而已，你总是可以用translate来代替它。每个transform-origin都可以被两个translate模拟出来（by CSS变形规范的编辑Aryeh Gregor）。例如：

transform: rotate(30deg);
transform-origin: 200px 300px;

//等价于
transform: translate(200px, 300px) 
           rotate(30deg)
           translate(-200px, -300px); 
transform-origin: 0 0;

transform-style
这个属性比较简单只有两个值flat和preserve-3d。用于指定舞台为2D或3D，默认值flat表示2D舞台，所有子元素2D层面展现。preserve-3d看名字就知道了表示3D舞台，所有子元素在3D层面展现。注意，在变形元素自身上指定该属性是没有用的，它用于指定舞台，所以要在变形元素的父元素上设置该属性。设定后，所有子元素共享该舞台。一图胜千言：

.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div class="div1"><img src="head75.png" /></div>
<div class="div1 p3d"><img src="head75.png" /></div>

两图唯一的区别是：右图的父div上设了transform-style: preserve-3d;，因此呈现了3d效果。左图的父div没有设transform-style默认是flat，因此元素不会在Z轴展开（translateZ(16px)失效），只能呈现2D效果。

另外如果同时设了transform-style: preserve-3d;和overflow: hidden;，3D效果将失效，等价于transform-style: flat;。如果你发现3D效果没有像预想地那样出现，可以检查一下（包括祖先元素）是否有overflow: hidden;，该属性将flatten everything…
perspective
指定3D的视距。默认值是none表示无3D效果，即2D扁平化。上面例子代码里其实已经用到过该属性了。介绍它之前，先借用rotateX / rotateY / rotateZ来明确一下xyz轴坐标的基本概念。一图胜千言，依次是rotateX轴旋转，rotateY轴旋转，rotateZ轴旋转：

.div1 {
    float: left;
    background-color: red;
    transform: perspective(200px) rotateY(45deg);
}
.div1 img{
    transform: translateZ(16px);
}
.p3d {
    transform-style: preserve-3d;
}
<div class="div1"><img src="head75.png" /></div>
<div class="div1 p3d"><img src="head75.png" /></div>

除了z轴旋转不受影响外，xy轴虽然还在旋转，但失去了3D效果，是2D扁平化的旋转。原因就是因为不设perspective的话，其默认值为none，没有视距没有3D。
perspective只能设px值，不能设%百分比。值越小表示用户眼睛距离屏幕越近，相当于创建一个较大的3D舞台。反之，值越大表示用户眼睛距离屏幕越远，相当于创建一个较小的3D舞台。这很容易理解，离的越近东西看起来越大，离的越远东西看起来越小。但具体该怎么设呢？借用W3C的图配合translateZ来帮助理解视距。

图中d就是perspective视距，Z就是translateZ轴的位移。Z轴正向位移时，3D舞台将放大。反之，Z轴负向位移时，3D舞台将缩小。上图Z是d的一半，因此3D舞台上的元素将是原来的2倍。下图Z同样是d的一半，但由于是负值，所以3D舞台上的元素将缩小三分之一。实际试试：

.divsp {
    display: inline-block;
    border: 1px blue dashed;
    margin-left: 30px;
    perspective: 100px;
}
.z1 {
    transform: translateZ(-75px);
}
.z2 {
    transform: translateZ(0px);
}
.z3 {
    transform: translateZ(25px);
}
.z4 {
    transform: translateZ(101px);
}
<div class="divsp"><img class="z1" src="head75.png" /></div>
<div class="divsp"><img class="z2" src="head75.png" /></div>
<div class="divsp"><img class="z3" src="head75.png" /></div>
<div class="divsp"><img class="z4" src="head75.png" /></div>

4张图的视距都是100px，表示4张图的3D舞台距离你的眼睛100px。我们从右往左来理解。图4的translateZ(101px)看到图片消失了，因为3D舞台距离你眼睛100px，而图片从舞台往Z轴正向位移101px，图片到了你脑袋后面自然什么都看不见。如果设成translateZ(100px)，相当于图片紧贴着你的眼睛，所以全屏都是图片。图3的translateZ(25px)，原始图片为75px，放大后的图片为100px。这是道初中数学题，你可以画一个底边是75px（图片原始尺寸），高是75px（视距100px-Z轴位移25px=75px）的等腰三角形，然后高扩展到100px，底边将等比例扩大3分之1至100px。图2的translateZ(0px)表示Z轴没有位移，因此仍旧是原始大小。图4的translateZ(-75px)，同样是道初中数学题，原始图片为75px，缩小到42.85px，再看看上面W3C的图理解一下，很容易算出来。

仔细看代码的可以看出来，上面介绍XYZ轴旋转时是直接在变形元素img上指定的transform: perspective(200px) rotateX(60deg);。而上面的代码是给变形元素img的父div指定perspective: 100px;。你可以理解为前一种方式是perspective()函数，后一种方式是perspective属性。两种指定方式是有区别的：

前者perspective()函数指定只针对当前变形元素，需要和transform其他函数一起使用，仅表示当前变形元素的视距。
后者perspective属性指定用于3D舞台，即3D舞台的视距，里面的子元素共享这个视距
perspective-origin
设置视距的基点，看W3C的图就能明白

基点默认值是50% 50%即center，表示视距基点在中心点不进行任何位移。你可以让基点在XY轴上进行位移，产生上图那样的效果。注意该属性同样应该定义在父元素上，适用于整个3D舞台。它需要和perspective属性结合着一起用。效果如下图：

.td1 { 
    transform-style: preserve-3d;
    perspective: 200px;
    perspective-origin: center;
}

为节约篇幅，只贴出来图1的3D舞台的配置，其余8图只需根据表头修改perspective-origin即可。根据上面9宫格图就比较容易理解perspective-origin视距基点的意思了。默认值50% 50%即center表示眼睛在舞台正中心。然后根据XY轴的位移量，或关键字left（等价于x轴0%）等，调整眼睛看3D舞台的位置。
backface-visibility
用于是否可以看见3D舞台背面，默认值visible表示背面可见，可以设成hidden让背面不可见。通常当旋转时，如果不希望背面显示出来，该属性就很有用，设成hidden即可。一图胜千言：

.stage{
    float: left;
    margin: 5px;
    perspective: 200px;
}
.container {
    transform-style: preserve-3d;
}
.image {
    backface-visibility: hidden;
}
.front {
    position: absolute;
    z-index: 1;
}
.back {
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{ transform: rotateY(0deg); }
.stage:nth-child(2) .container{ transform: rotateY(30deg); }
.stage:nth-child(3) .container{ transform: rotateY(60deg); }
.stage:nth-child(4) .container{ transform: rotateY(90deg); }
.stage:nth-child(5) .container{ transform: rotateY(120deg); }
.stage:nth-child(6) .container{ transform: rotateY(150deg); }
.stage:nth-child(7) .container{ transform: rotateY(180deg); }

<div class="stage"> //为节约篇幅该DOM请无脑复制7个
    <div class="container">
        <img class="image front" src="head75.png" />
        <img class="image back" src="bg75.png" />
    </div>
</div>

DOM结构中就能看出，是两张图片（一正一反）叠在了一起。由于变形元素img设了backface-visibility: hidden;，当Y轴旋转超过90度时（Y轴旋转正好90度时，正中间图4为一片空白，就像丁字裤在视线里消失了_），正面的图片将不可见，底下的背面图片显示出来了。如果将img的backface-visibility属性去掉（默认为visibility），效果如下图。Y轴旋转超过90度时，将显示正面的图片的背部（所谓背部对屏幕来说其实就是图片矩阵的X轴值取反）：
至此5个前置属性介绍完毕。它们多用于3D场合，因此常见的3D的HTML结构如下：

`<舞台>        //为舞台加上perspective
    <容器>     //为容器加上preserve-3d，使容器内元素共享同一个3D渲染环境
        <元素> //为元素加上transform效果
    </容器>
</舞台>`

作者：张歆琳
链接：https://www.jianshu.com/p/17e289fcf467