2D

属性：transform功能属性：变换

    位移：translateX()
          translateY()
     旋转：rotateX()
          rotateY()
          rotateZ()
     缩放：scaleX()
           scaleY)
           scale()
               值为1：默认
               0~1：缩小
               0：缩小至无
               -1~0：反向缩小
               小于1：放大
               大于-1：反向放大
               

变换关键基点：transform-origin：水平 垂直

        关键字：left center right top bottom
        具体数值：px %
        

3D

景深：近大远小的效果

perspective：给父元素设置，影响子元素
separate 2D环境，是默认值
preserve-3D：3D环境

body {
	perspective: :1200px;/* 景深 近大远小效果 */
	transform-style: preserve-3d; /* 提供3D环境 */
}

3D功能函数

  位移:translateZ()
       translate(x,y,z)
  旋转:rotateX()
       rotateY()
       rotateZ()
       rotate3D(x,y,z，a)
       x y z的取值范围为0~1
       a是角度

<div class="box">
			<div class="box1"></div>
		</div>

.box {
	width: 500px;
	height: 500px;
	background: rgba(0, 0, 0, 0.5);
	margin: 200px auto;
	
	transform-style: preserve-3d; /* 提供3D环境 */
	transform: rotateY(0deg);
}
.box1{
	width: 150px;
	height: 200px;
	background: red;
	transition: all 1s;
	
}
.box:hover .box1{
	transform: translateZ(100px);
	transform: translate3d(0px,0px,200px);
	
	transform: rotateX(60deg);
	transform: rotateY(60deg);
	transform: rotateZ(60deg);
	transform: rotate(0.1,1,0,-120deg);
        }