2D和3D移动变化

2D：

1. x,y一起使用 语法: transform:translate(x,y);
  /* transform: 变化变换     */
 transform: translate(200px,100px) ;

 2.x,y 单独使用
  transform: translateX(200px);
   transform: translatey(200px);
    transition: all 1s; 变化时间

 3.缩放
   1.数值相同时 可以写一个值
   2.小于1的时候为缩小
   3.不会影响其他元素位置,默认为元素中心点缩放
   scale 代表缩放得意思 代表缩放比例 里面数字不设置单位
   transform: scale(x,y);
 
  4.旋转
     transform-origin: ;/*设置旋转中心点位置  默认值 50% 50% 0(left top )*/
     rotate:旋转    角度单位 deg
     transform: rotate(45deg);

3D：

 <!-- 3D转换基于css完成3D设计 -->
        <!-- 在css中3D其实就是2D的一种补充，在2D屏幕基础上，新增了z轴，形成了三维坐标系 -->
        <!-- 三维坐标系概念：在x轴，y轴基础上新增z轴 -->
        <!-- 3D特点：近大远小 -->
        <!-- 平面 x轴  y轴 -->
        三维坐标系： x轴：水平向右为正值 向左为负值
              y轴：垂直向下为正值 向上为负值
              z轴：垂直屏幕 以屏幕为分割，往外为正值 往里为负值

                /* transform: translate3d(); */
                /* transform: translateX(200px); */
                /* transform: translateY(100px); */
                /* 目前看不到translateZ的效果，需要借助透视来做 */
                /* 正值代表向外移动 顺着眼睛的方向 越来越近  */
                /* transform: translateZ(300px); */
                transform: translate3d(0,200px,300px);
                /* 三个值都不能省略，如果不移动就写0 */
       <!-- 透视：视距，就是眼睛距离屏幕的距离，距离视觉点越近的在屏幕上成像越大，越远的成像越小 -->
      <!-- 遵循近大远小 -->
      <!-- 透视 perspective -->
      <!-- 视距，就是眼睛距离屏幕的距离 成反比 -->
      <!-- z，物体距离屏幕的距离，z的值越大物体越大，成正比 -->
      <!-- 如何使用： -->
      <!-- 给父元素添加一个固定的perspective，子元素添加transform: translateZ（）才有3D效果，必须配合使用， -->
      <!-- 虽然两个都可以让盒子大小改变，但需要配合使用，让盒子变大变小，一般不会改变透视（视距），而是调整translateZ -->
                   /* 有透视就有了立体感 透视就是观察距离 */
                        perspective: 400px;
       /* transform: rotateX(360deg) rotateY(150deg) rotateZ(45deg); */
       /* transform: translate3d(x,y,z,deg);沿着定义轴旋转 */
       /* 沿x轴旋转 */
       /* transform: rotate3d(1,0,0,45deg); */
       /* 沿对角旋转 */
       transform: rotate3d(1,1,0,180deg);

       /* 写法：爷爷元素设置  perspective: 400px; */
      /* 父元素设置   transform-style: preserve-3d; */
      /* 子元素： 旋转 缩放 平移 倾斜等等 */

  三维立体开启：   /* 默认值不开启三维立体 */
    /* transform-style:flat ;  */
    transform-style: preserve-3d;/*保持开启3d空间*/
     
            /* 旋转中心点 */
      /* transform-origin: ; */