关于transform属性的详细介绍

了解transform的3D效果之前，先了解一下坐标和透视（perspective）

一、关于坐标

在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

二、关于透视perspective

• perspective:none || legth 应用于块状元素，不用于inline元素，无继承性
• length的值不能0或者是负数，因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的
• 透视perspective不可取百分比，因为百分比需要相对的元素，但z轴并没有可相对的元素尺寸
• 一般地，物体离得越远，显得越小。反映在perspective属性上，就是该属性值越大，元素的3d效果越不明显。
• 设置透视perspective属性的元素就是被透视元素。一般地，该属性只能设置在变形元素的父级或祖先级。因为浏览器会为其子级的变形产生透视效果，但并不会为其自身产生透视效果

三、关于透视原点perspective-origin

• perspective-origin:X值 Y值，设置透视原点（一般默认原点位置为元素的中心点初始值 50% 50%），应用于块状元素(非inline元素)，无继承性
• 1. X轴取值：left || right || center || % || length（px|em）
  2. Y轴取值：top || center || bottom || % || length（px|em）
• 当perspective-origin 的值只有一个参数时，默认为X轴的值，且Y轴方向为center
• 当X轴或Y轴的值为length时
  1. X轴上数值表示在X轴离0点（元素边框外侧左上角）的偏移量
  2. Y轴上数值表示在Y轴离0点的偏移量

关于 transform 属性的用法

transform有5个属性值主要包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix; 
其主要用法用于2D变形

【1】translate --移动

    样式代码:

<style>
.wrapper{margin-top: 50px;border: 1px solid #dedede;box-shadow: 2px 2px 10px #777;border-radius: 10px;}		
.border{width: 160px;height: 160px;border: 1px solid #ddd;background: #dedede;position: relative;}
.border div{position: absolute;left: 0;top: 0;text-align: center;margin: 0;}
.box01,.box02,.box03,.box00{font-size: 0.75em;}
/* 移动 */
.box00:hover{transform: translate3d(50px,50px,200px);opacity: 0.5;}
.box-0:hover{transform: translate3d(50px,50px,-200px);opacity: 0.5;}
.box01:hover{transform: translate(20px);}
.box02:hover{transform: translate(0,40px);}
.box03:hover{transform: translate(20px,40px);}
 /* 旋转 */
.box04:hover{transform: rotateX(60deg);}
.box05:hover{transform: rotateY(60deg);}
.box06:hover{transform: rotate(60deg);}
.box07:hover{transform: rotate3d(1, 1, 1, 60deg);}

.box{width: 160px;height:160px;font-size: 1em;perspective: 800px;}
.box08:hover{transform: scale(0.5);}
.box09:hover{transform: scaleX(0.5);}
.box10:hover{transform: scaleY(0.5);}
.box11:hover{transform: scale(0.5, 1.2);}
.box12:hover{transform: scale3d(0.5, 1.2, 0.3);}
.box13:hover{transform: scaleZ(2) translateZ(100px);}
</style>

                <div class="border">
                    <div class="box01">
                        translate(20px)
                        <br>
                    </div>
                </div>
                <div class="border">
                    <div class="box02">
                        translate(0,40px)
                    </div>
                </div>
                <div class="border">
                    <div class="box03">
                        translate(20px,40px)
                    </div>
                </div>
                <br>
                <div class="border">
                    <div class="box00">
                        translate3d(50,50,200)
                    </div>
                </div>
                <div class="border">
                    <div class="box-0">
                        translate3d(50,50,-200)
                    </div>
                </div>

总结：

• translate移动，不指定transform-origin的情况下，以元素的中心点为原点移动，若要改变原点，需设置transform-origin
• translate主要沿X轴和Y轴两个方向移动，单独使用时可以用translateX()和translateY()，只设置一个值的时候表示只沿X轴方向移动；同时设置X值和Y值，则表示同时沿X轴和Y轴移动
• 当设置的数值为负数时，表示沿当前轴的反方向移动
• 问题：关于transform:translate3d(x,y,z)，在不设置div的透视属性perspective时，无法看出Z轴上的变化。如果不设置透视，那么浏览器会将元素的3D变形操作投射垂直到2D视平面上，最终呈现出来的只是元素的宽高变化
• translate3d(0,0,z)相当于translateZ(z)，z只能取数值

【2】rotate --旋转

                <div class="border" style="perspective:none;">
                    <div class="box04">
                        X 轴旋转60°
                        <br> rotateX(60deg)
                    </div>
                </div>
                <div class="border">
                    <div class="box04">
                        X 轴旋转60°
                        <br> rotateX(60deg)
                    </div>
                </div>
                <div class="border">
                    <div class="box05">
                        Y 轴旋转60°
                        <br> rotateY(60deg)
                    </div>
                </div>
                <div class="border">
                    <div class="box06">
                        Z 轴旋转60°
                        <br> rotateZ(60deg)
                    </div>
                </div>
                <div class="border">
                    <div class="box07">
                        3D旋转60°
                        <br>rotate3d(60deg)
                    </div>
                </div>

总结：

• 透视是transform变形3D中最重要的内容。如果不设置透视（perspective），元素的3D变形效果将无法实现(参照上第一、第二个效果)。
• Z轴旋转，rotate(60deg)与rotateZ(60deg)效果相同，不指定transform-origin的情况下,表示以元素中心点为原点开始旋转
• rotate3d(x,y,z,angle):4个参数，前三个，对应x,y,z 轴，标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。

【3】scale --缩放

 

                <div class="border">
                    <div class="box box08">缩放0.5倍
                        <br>scale(0.5)</div>
                </div>
                <div class="border">
                    <div class="box box09">X 轴缩放0.5倍
                        <br>scaleX(0.5)</div>
                </div>
                <div class="border">
                    <div class="box box10">Y 轴缩放0.5倍
                        <br>scaleY(0.5)</div>
                </div>
                <div class="border">
                    <div class="box box11">X轴，Y轴同时缩放
                        <br>scale(0.5,1.2)</div>
                </div>
                <div class="border">
                    <div class="box box12">3d缩放
                        <br>scale3d(0.5,1.2,0.3)</div>
                </div>
                <div class="border">
                    <div class="box box13">3d缩放
                        <br>
                    </div>
                </div>

• scale(num)：num的取值，表示缩放的倍数。不指定transform-origin的情况下，以元素中心点为原点
• scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
• 1. scale3d(x,y,z),默认值为scale3d(1,1,1)，当参数为负值时，先翻转再缩放
  2. scaleZ(z)相当于scale3d(1,1,z)
  3. 3d缩放函数相当于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)
  4. 问题：scaleZ()和scale3d()单独使用时没有任何效果;transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等价的