”
CSS中的transform属性有点难学，尤其是CSS3中加入3D效果后，2D转3D的学习成本成倍增加。 为什么设计师的眼里充满了泪水，因为对页面的深爱。 本文介绍变换。 （擎天柱：汽车人变身！）
Transform本质上是一系列修改函数，即平移位移、尺度缩放、旋转旋转、倾斜扭曲、矩阵矩阵。 戒骄戒躁，我们一一来说。
帖子属性：
2D 变体：
3D 变体：
等级影响力
帖子属性
------------------------------------------
变换原点
用于指定元素变体的中心点。 默认中心点是元素的精确中心，即 XYZ 轴的 50%50%0。 您可以使用此属性更改元素在 XYZ 轴上的中心点。 正值表示正位移，负值表示负位移。 （XYZ轴正方向为向右、向下、靠近用户耳朵，反之则相反）
意思是2个维度的x-offset/y-offset可以设置为px值或者%比例，也可以设置top/right/bottom/left/center等关键字。 表示3维z-offset只能设置px值，不能设置%比例，没有关键字。
默认中心点位于元素的中心，因此关键字top相当于topcenter相当于50%0%（x轴保持在50%，y轴移动到0%）。 同理，right等各个关键字相当于rightcenter相当于100%、50%，就不赘述了。
一图胜千言：给图片设置不同的中心点后，看看旋转、扭曲、缩放的效果。 例如，图 1 中标头第一行的 center 表示 transform-origin:center。 第二条线旋转(30deg); 表示变换：旋转（30deg）；。
另外，transform-origin指定变换中心点对平移位移没有影响。 平移位移仍然相对于元素的中心。 如果你持怀疑态度，你可以自己尝试一下。
变换风格
这个属性比较简单，只有两个值flat和preserve-3d。 用于指定舞台是2D还是3D，默认值flat表示2D舞台，所有子元素都以2D级别解释。 keep-3d从名字上就可以看出代表3D阶段，所有子元素都在3D层面进行解释。 请注意，在变体元素本身上指定该属性是没有用的，它用于指定阶段，因此应在变体元素的父元素上设置该属性。 设置后，所有子元素共享舞台。 一张图片胜过千言万语：
.div1{
向左飘浮;
背景颜色：红色；
变换：透视（200px）旋转Y（45deg）；
.div1img{
变换：translateZ(16px);
.p3d{
变换风格：保留 3d；
两张图片唯一的区别是：transform-style:preserve-3d; 设置在下图的父div上，从而呈现3D效果。 左图中的父div默认没有将transform-style设置为flat，因此元素不会在Z轴上扩展（translateZ(16px)失败），只能呈现2D效果。
另外，如果transform-style：preserve-3d； 和溢出：隐藏； 同时设置，3D效果将无效，相当于transform-style: flat;。 如果发现3D效果没有按预期出现，可以检查（包括祖先元素）是否有overflow:hidden;，这个属性会把一切都展平...
看法
指定 3D 的观看距离。 默认值为none，表示没有3D效果，即2D扁平化。 虽然这个属性已经在示例代码里面使用了。 在介绍之前，我们先通过rotateX/rotateY/rotateZ来明确一下xyz轴坐标的基本概念。 一图胜千字，依次是rotateX轴旋转、rotateY轴旋转、rotateZ轴旋转：
。X{
变换：透视（200px）旋转X（60deg）；
.y{
变换：透视（200px）旋转Y（60deg）；
.z{
变换：透视（200px）旋转Z（60deg）；
从图中还可以看出，烤牛肉串在x轴上旋转，铁管舞在y轴上旋转，体彩转盘在z轴上旋转。 里面的z轴只是一个点。 如果你想象一下，你就可以理解，该点似乎是一条垂直于屏幕的线，而透视视线是从屏幕到用户耳朵的距离。
实现3D的关键是要有透视观看距离。 如果去掉上面代码中的视角（200px），效果如下：
不仅z轴旋转不受影响，xy轴看上去还在旋转，只不过失去了3D效果，是2D扁平化旋转。 原因是，如果不设置透视，它的默认值为none，就没有视线，没有3D。
Perspective只能设置px值，不能设置%比例。 值越小表示用户的鼻子离屏幕越近，相当于创建了一个更大的3D舞台。 反之，数值越大表示用户的眼睛距离屏幕越远，相当于创建了一个更小的3D舞台。 很容易理解，离某物越近，它就越大，离你越远，它就越小。 但如何设置呢？ 借用W3C的图和translateZ来帮助理解视线。
图中，d为透视观看距离，Z为translateZ轴的位移。 当Z轴正向移动时，3D舞台将放大。反之，当Z轴负向移动时，3D舞台将缩小。 上图中，Z是d的一半，因此3D舞台上的元素将加倍。 右图中的Z也是d的一半，但由于是负值，所以3D舞台上的元素会减少三分之一。 试试看：
.divsp{
显示：内联块；
边框：1pxbluedashed；
左边距：30px；
视角：100px；
.z1{
变换：translateZ(-75px);
.z2{
变换：translateZ(0px);
.z3{
变换：translateZ(25px);
.z4{
变换：translateZ(101px);
这四张图片的观看距离是100px，也就是说这四张图片的3D舞台距离你的眼睛有100px。 我们从右到左理解。 图4中的translateZ(101px)看到图片消失了。 由于3D舞台距离你的耳朵有100px，而图片从舞台到Z轴正方向位移了101px，所以当图片靠近你的耳朵时自然是看不见的。 如果设置为translateZ（100px），则表示图片离你的眼睛很近，所以整个屏幕都是图片。 对于图3中的translateZ(25px)，原始图像是75px，放大图像是100px。 这是道中学的一道语文题。 可以画一个斜边为75px（图片原规格）、高为75px（观看距离100px-Z轴位移25px=75px）的等边三角形，然后将高度扩大到100px，斜边就是比例列扩展 1/3 到 100 像素。 图2中的translateZ(0px)表示Z轴没有位移，所以还是原来的大小。 图4中的translateZ(-75px)也是道中学的语文题。 原图为75pxcss3以中心点旋转，缩小为42.85px。 看里面的W3C图就明白了，也很容易计算。
仔细看代码可以发现，当XYZ轴旋转时，直接在变换元素img上指定：perspective(200px)rotateX(60deg);。 前面的代码指定视角：100px； 为变体元素 img 的父级 div。 你可以理解为前一个方法是perspective()函数，后一个方法是perspective属性。 这两种指定方法有区别：
后面的perspective()函数仅为当前变体元素指定，需要与transform的其他函数一起使用，仅指示当前变体元素的观看距离。
前面的perspective属性指定了3D舞台的观看距离，即3D舞台的观看距离，上面的子元素共享这个观看距离
视角原点
设置基点视距只能看W3C图片来理解
基点的默认值为50%50%或中心，这意味着视线基点在中心点处不发生任何位移。 可以使基点在XY轴上移动，形成如上图所示的效果。 请注意，该属性也应该在父元素上定义，并应用于整个 3D 舞台。 它需要与透视属性结合使用。 疗效如右图：
.td1{
变换风格：保留 3d；
视角：200px；
视角原点：中心；
为了节省篇幅，只贴出图1中3D舞台的配置，其他8张图只需根据标题改变perspective-origin即可。 根据前面的9方图就更容易理解透视原点视线基点的含义了。 默认值为50%50%，即center表示耳朵位于舞台中央。 然后根据XY轴的位移，或者关键字left（相当于x轴上的0%）调整耳朵的位置来看到3D舞台。
背面可见度
用于查看是否可以看到3D舞台的反面。 默认值visible表示反面可见，可以设置为hidden使反面不可见。 一般旋转时，如果不想显示反面，这个属性非常有用，设置为隐藏即可。 一张图片胜过千言万语：
。阶段{
向左飘浮;
边距：5 像素；
视角：200px；
。容器{
变换风格：保留 3d；
。图像{
背面可见性：隐藏；
。正面{
位置：绝对；
z 索引：1；
。后退{
变换：旋转Y(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{变换:rotateY(120deg);}
.stage:nth-child(6).container{transform:rotateY(150deg);}
.stage:nth-child(7).container{变换:rotateY(180deg);}
//为了节省空间，请无脑复制7个DOM
从DOM结构可以看出，两张图片（一张正面一张背面）堆叠在一起。 因为变体元素img设置了backface-visibility:hidden;，当Y轴旋转超过90度时（当Y轴旋转正好90度时，中间的图4是空白的，就像一条丁字裤消失在视线中^ _^) ，正面图像将不可见，而内部的反面图像将显示。 如果去掉img的backface-visibility属性（默认为visibility），效果如右图。 当Y轴旋转超过90度时，就会显示正面图片的肩膀（所谓腹部就是屏幕的图片矩阵的X轴值的反面）：
至此，五个帖子属性的介绍就完成了。 它们大多用在3D场合，所以常见的3D HTML结构如下：
//给舞台添加透视
//给容器添加preserve-3d，让容器内的元素共享同一个3D渲染环境
//给元素添加变换效果
2D 变体
------------------------------------------
2D 变体包括平移位移、比例缩放、旋转、倾斜扭曲和矩阵矩阵。 基本内容我就不详细说了，自己参考w3cschool即可，这里只是一些w3cschool上没有涵盖的内容。
平移位移
2D 的平移位移系列有：translate、translateX、translateY
平移位移类似于position:relative属性。 可以设置单值或双值。 负数代表XY轴正向位移，正数代表反向位移。 设置单个值仅表示X轴位移，Y轴坐标保持不变，例如transform:translate(100px); 相当于translate:translate(100px,0);。 这与 CSS 中的其他单值属性略有不同。 不要误以为单个值就是X轴和Y轴的位移。 事实上，最好使用双精度值。 如果与Y轴无关，请使用translateX(100px)。 虽然效果是一样的，但是代码的可读性更强。 同样，如果与X轴无关，可以使用transform:translateY(100px); 相当于translate:translate(0,100px);。
据说效果和position:relative属性类似，但是语义和position不同。 Position用于页面布局，translate属于transform中的一个系列，用于元素修改。 你可能会想，不同的语义有什么用，疗效还可以吗？ 这取决于你用什么标准来判断功效。 CSS 的神奇之处在于，你可以在完全遵守其意图的场景中使用属性，而不管代码的可读性如何，有时甚至会存在违反意图的细微差别。 例如，与动画效果结合时，平移可以大于1px过渡，因此动画效果更流畅。 但位置的最小单位是1px，动画的效果肯定会打折扣。 另外，使用translate实现动画时，可以使用GPU，动画的FPS更高，但position实际上很难享受到这个优势。 其他如回流和重绘也有区别。 因此，如果你把该用translate的位置用了，而以后的一些需求变化达不到要求，那也没什么可怪的。
规模缩放
用于2D的缩放系列有：scale、scaleX、scaleY
刻度缩放还可以设置单值和双值。 单个值意味着 X 轴和 Y 轴缩放相同的值。 默认值为 1。要缩小，请设置 0.01 到 0.99 之间的值。 如需放大，请设置大于1的值。例如transform:scale(.5); 可以加倍，transform:scale(2); 可以加倍。 效果在最开始引入transform-origin的时候图中已经展示过了，这里就不赘述了。
如果只想缩放X轴，可以使用scaleX(.5)，它相当于scale(.5,1)。 同样，如果只想缩放Y轴，可以使用scaleY(.5)，它相当于scale(1,.5)。
设置double值可以实现X轴和Y轴不等列缩放，如transform:scale(.5,1.5);，原来75*75px的图片尺寸变成37.5*112.5px。 如左图所示：
w3cschool上没有提到的是，scale可以设置为正数，正数会先将元素反转再缩放，如transform:scale(-.5,-1.5);，看图下面为疗效。 为什么逆转是可以理解的？ 将XY轴像素矩阵的各个值反转后，疗效相当于反转。 其实也可以使用rotate来实现反转。
旋转旋转
用于2D的旋转系列有：rotate
Rot旋转比较简单，只能设置单个值。 负数表示顺时针旋转，正数表示逆秒针旋转。 比如transform:rotate(30deg);，一开始介绍transform-origin的时候效果就已经在图里了，就不赘述了。 （注意，与前面不同的是，2D层面上没有rotateX/rotateY，它们和rotateZ都是3D旋转）
歪斜扭曲
2D 的倾斜系列有：skew、skewX、skewY
倾斜失真可以设置为单值和双值。 单个值表示仅X轴扭曲，Y轴保持不变，如transform:skew(30deg); 等价于transform:skew(30deg,0);。 考虑到可读性，不建议使用单一值，transform:skewX(30deg); 应该使用。 skewY 表示仅 Y 轴扭曲，X 轴保持不变。 效果在最开始引入transform-origin的时候图中已经展示过了，这里就不赘述了。
矩阵 矩阵
与矩阵矩阵没有直接联系，但它是所有2D变换的本质，所有2D变换效果都可以用矩阵矩阵来实现。 先跳过这篇文章，把它和3D矩阵matrix3d留给下一篇文章。
3D 变体
3D变体包括translate3d位移、scale3d缩放、rotate3d旋转、matrix3d矩阵。 （请注意，倾斜不是 3D）。 3D的用法和2D类似，只不过多了一个Z轴值（这不是废话吗……）。
平移3d位移
3D的translate3d位移系列有：translate3d、translateZ
translate3d(tx,ty,tz)，其中tz的Z轴宽度只能是px值，而不是%比例。 translateZ 相当于translate3d(0,0,tz)。 Z轴的值越大，距离眼睛越近，元素就越大，但是当该值小于透视视线时，元素就会消失，因为眼睛很难看到后面的东西耳朵，这个在透视介绍中已经介绍过了，不再多说了。 较小的值表示距离眼睛较远的较小元素。 实际使用中，translateZ的效果和2D尺度缩放的效果很相似，但原理不同。 translateZ 是 Z 轴上的位移，scale 是 XY 轴上的缩放。 再次，尽量在与属性相匹配的场合使用该属性。
缩放3D 缩放
3D的scale3d缩放系列有：scale3d、scaleZ
scale3d(sx,sy,sz)，其中sz为Z轴的缩放比例列，值与sx和sy相同，为0.01~0.99时元素缩小，为1时尺寸保持不变，小于1时元素变大。scaleZ等价于scale(1,1,sz)。 需要注意的是，单独使用scale3d或scaleZ不会产生任何效果，需要与其他属性结合才能在3D舞台上产生效果，否则根本无法定义Z轴的缩放比例。
旋转3d旋转
用于3D的rotate3d系列有：rotate3d、rotateX、rotateY、rotateZ
rotate3d(x,y,z,a) 多了一个参数a（发音为alpha...），表示3D舞台上的旋转角度，xyz的值为0到1，即旋转向量值每个轴。 rotate3d、rotateX、rotateY、rotateZ的疗效都在里面展示了，不再赘述。
矩阵3d矩阵
最后，matrix3d矩阵是所有3D变体的本质，所有3D变体效果都可以用matrix3d矩阵来实现。 先跳过这篇文章，把它和前面的2D矩阵矩阵留给下一篇文章。
等级影响力
------------------------------------------
现在让我们看看变体对 CSS 层次结构的影响。 说到等级，绝对是等级中的高富帅。 当你看到一个时，你会和另一个一起睡。 抱歉，您看到一个并按另一个。 抱歉，您看到一个并遮盖另一个。
//左图
//如下图
在左图中，由于第一个img具有绝对值，因此它完全忽略了DOM结构中的顺序并正确覆盖了第二个img。 下图为第二张图片设置了变换。 一般我们认为scale(1)是废代码，但是从下图我们已经可以看出，由于transform的准备，元素有相当于absolute的level，所以两个imgs的level相同，按顺序排列在 DOM 中，前者覆盖了后者。
（这里使用的是scale，可以改为旋转、倾斜等，效果是一样的。即level与transform有关，但与具体transform函数无关）
由于absolute和transform是同一级别的，所以可以调整里面两个imgs的顺序，这样有transform的图像就会被absolute覆盖。 如果坚持让绝对高手带头，可以设置z-index:1，这样level会低于transformcss3以中心点旋转，达到覆盖效果。
相对和固定与绝对同级也适用于上述层次关系。 如果您的页面上有固定的广告代码，并且页面滚动时页面被转换元素覆盖，请不要感到震惊，请尝试设置 z-index。
总结
------------------------------------------
变换变体的使用介绍到此就差不多结束了。 为了减少篇幅，文中代码省略了-ms、-o等前缀。 如果需要适配所有浏览器，请自行添加。 下一篇文章matrix/matrix3d将会深入其本质，看看这个修改后的函数是如何改变坐标位置并展现出各种疗效的。
文：张新林
原来的：
↓点击这里了解鬣狗！
