2D 转换

 一，转换transform

      transform翻译成汉语具有"变换"或者"改变"的意思。

      通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

      最能体现transform 属性强大实力的是实现元素的3D变换效果

      2D

      2D变换，是在一个平面对元素进行的操作。

      可以对元素进行水平或者垂直位移、旋转或者拉伸

变形属性：transform的所有属性值

      1、transform：none;默认值

      2、transform：translate（）；移动  平移  单位是px

      3、transform：rotate（）；旋转  单位是deg   deg度数

      4、transform：scale（）；缩放  没有单位  默认值是1

      5、transform：skew（）；倾斜   单位是deg

      6、transform：matrix（）；矩阵 

      7、transform：perspective（）；景深   视距  单位是px

确定坐标系

       

 

对上面坐标系简单分析如下：

      （1）.默认状态下，x轴是水平的，向右为正。

      （2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

css中Transform转换属性（注  平移最好在旋转和缩放前）

  1，transform：none          默认

        transform：translate   平移（注 单位可以为px ，%   ）默认为x轴移动

        transform：translate   根据X轴给定的参数，从当前元素位置移动

        transform ：translateY(200px)；   根据Y轴给定的参数，从当前元素位置移动。

        transform ：translateX(200px)；   根据X轴给定的参数，从当前元素位置移动。

        transform ：translate(10px,20px)；    定义 2D 平移移动。

        transform ：translateX(200px)   translateY(200px) ；

   2，transform：rotate     旋转    单位  deg   默认为  z轴

        transform：rotateX（30deg）       根据x轴给定的参数，从当前元素位置旋转

        transform ：rotateY(30deg)；       根据Y轴给定的参数，从当前元素位置旋转。

        transform ：rotateX(30deg)   rotateY(30deg)  ；

  3，transform：scale（）     x和y同时缩放  默认值为1

        transform ：scale(2)；  默认是X和Y同时缩放。

        transform ：scaleX(2)；   通过设置 X 轴的值来定义缩放转换

       transform ：scaleY(3)；    通过设置 Y 轴的值来定义缩放转换。

       transform ：scale(2,5)；  transform ：scale(2,5)；

       transform ：scaleX(2)   scaleY(3) ；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

  4，transform：skew    倾斜    单位deg

       transform：skew （30deg）  默认为x轴倾斜

       transform ：skewX(30deg)； 通过设置 X 轴的值来定义倾斜转换

       transform ：skewY(30deg)； 通过设置 Y 轴的值来定义倾斜转换

       transform ：skew(30deg,130deg)     定义 2D 倾斜

      transform ：skewX(30deg)  skewY(130deg)  ；

5，transform：matrix（）；矩阵

      transform：matrix（n，n，n，n，n，n）      定义2d转换   使用六个值得矩阵

6，transform：perspective（）；景深   视距   给到元素本身上

      transform ：perspective(200px)；     景深，用来设置用户的眼睛距离元素的距离，数值越大

表示距离越远，看到元素的变化就不明显。不能给负值

二，转换基点

       改变元素基点的位置transform-origin

       他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

        A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

        B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。

三，css3的3D设置

       2d场景：在屏幕上水平和垂直的交叉线x轴和y轴‘

       3d场景：在垂直于屏幕的方法，相当于多出个z轴

       z轴： 靠近屏幕的方向是正向，远离屏幕的方向是反向

 

1，transform：translate平移（同上）

     transform ：translateZ(200px)；   定义 3D 转换，只是用 Z 轴的值。

     transform ：translate3d(10px,20px,30px)；    定义 3D 平移移动。

    transform ：translateX(200px)   translateY(200px)   translateZ(200px)；

2，transform：rotate旋转（同上）

     transform ：rotateZ(30deg)；    定义 3D 转换，只是用 Z 轴的值。

     transform ：rotate3d(0,0,1,30deg)；         定义 3D 旋转。

     transform ：rotateX(30deg)   rotateY(30deg)   rotateZ(30deg)；

3，transform：scale  缩放（同上）

      transform ：scale3d(2,3,4)；   定义 3D 缩放。

      transform ：scaleX(2)   scaleY(3)  scaleZ(3)；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

4，transform：skew倾斜（同上）

     transform ：skewX(30deg)  skewY(130deg)  ；

注意点：倾斜没有Z轴的写法

5 转换基点

改变元素基点的位置transform-origin

他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。

四css的3d场景设置

           1，transform-style: flat | preserve-3d；指定嵌套元素如何在3D空间中呈现

                     A.flat：flat值为默认值，表示所有子元素在2D平面呈现

                     B.preserve-3d：表示所有子元素在3D空间中呈现。

             C. 注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素

2， perspective： 200px ；  景深   视距

            用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

        3，  perspective-origin

          3D变形中另一个重要属性，主要用来决定perspective属性的源点角度