css 2D,3D转换

2D:

2D平移：

  transform: translate(50%,100px);

元素的位移 第一个参数为水平方向移动的距离（px,%(相对于自身))
和relative一样的效果

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

        div{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /* 2D平移 */
        .box {
  
            transition: all 1s;
        }
        .box:hover {
            /* 元素的位移 第一个参数为水平方向移动的距离（px,%(相对于自身))
             和relative一样的效果*/
             transform: translate(50%,100px);
        }
       

应用： translate结合定位做元素居中：
       
       

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

       .box1 {
             position: absolute;
             left: 50%;
             top: 50%;
             transform: translate(-50%,-50%);
             display: inline-block;
             border: 1px solid gray;
         }

2D旋转：

       transform: rotate(360deg); 旋转角度

       transform-origin: left top; 改变旋转的圆心默认为center（可以为px或方位词）

<div class="box2"></div>

         /* 2D旋转 */
         .box2 {
             margin: 0 auto;
             
             /* transform-origin: left top; */

             transform-origin: 100px 100px;/*以左上角为心旋转*/
             transition: transform 2s;
          
         }
         .box2:hover {
             /* 旋转角度 */
            transform: rotate(360deg);
         }

 

2D缩放：

transform: scale(参数1，参数2);（两个参数小于1为缩小，大于1为放大，分别是宽度和高度）

   <div class="box3">aaaa</div>

         /*2D 缩放 */
         .box3 {
             margin: 100px auto;
             /* 原始尺寸 */
             /* transform: scale(1,1); */
             /* 宽度放大两倍 */
             /* transform: scale(2,1); */
             /* 宽度缩小为0.5倍 */
             transform: scale(0.5,1);
         }

2D扭曲：

 transform: skew(45deg,0); 默认不扭曲 
 第一个参数是从y轴逆时针角度，第二个参数是从x轴顺时针 

   <div class="box4">aaaa</div>

         /*2D 扭曲 */
         .box4 {
             margin: 200px auto;
             /* 默认不扭曲 */
             /* 第一个参数是从y轴逆时针角度，第二个参数是从x轴顺时针 */
             /* transform: skew(0,0); */
             /* x轴扭曲45度 */
             /* transform: skew(45deg,0); */
             transform: skew(20deg,20deg);
         }

3D:

 3D平移：

沿z轴的效果，要给父元素定义深度 (  perspective: 800px; 定义3D元素距视图的距离 实现透视)
 transform: translate3d(0,0,500px);

<div class="box5"></div>

         body {
             perspective: 800px;/*定义3D元素距视图的距离 实现透视*/
         } 
         .box5{
            margin: 200px auto;
           transition: transform 2s;
         }
         .box5:hover{
             /* 沿z轴的效果，要给父元素定义深度 */
              transform: translate3d(0,0,500px);
         }

3D旋转：

       transform: rotate3d(0,0,1,360deg); 前三个参数代表x,y,z轴是否旋转，0为不旋转，1为旋转，                                                                 最后一个参数为角度

       transform-origin: left top; 改变旋转的圆心默认为center（可以为px或方位词）

<div class="box6"></div>

      
         .box6 {
            margin: 100px auto;
             /* 改变旋转的圆心，默认为center */
             /* 以左上角为心旋转 */
             /* transform-origin: left top; */

             transform-origin: 100px 100px;/*以左上角为心旋转*/
             transition: transform 2s;
         }
         .box6:hover {
             /* x,y,z  0:不旋转  1：旋转  最后一个参数为度数*/
            /* transform: rotateX(360deg); */
            /* transform: rotateY(360deg); */
            /* transform: rotateZ(360deg); */

            transform: rotate3d(0,0,1,360deg);
         }

 

3D缩放：

transform: scale3d(参数1，参数2，参数3);（3个参数小于1为缩小，大于1为放大，分别是x,y,z轴）

   <div class="box7">box7</div>

   .box7 {
             margin: 100px auto;
            transition: transform 2s;
         }
         .box7:hover {
             /* x,y,z轴的缩放 */
             transform: scale3d(0.5,1,2);
         }