css（高级）之“”转换“”笔记

一.定义:转换是使元素改变形状.尺寸和位置的一种效果.又称为变形.

     分为;2D和3D转换.2D转换只能在X.Y轴发生改变;如:平移(move).倾斜(skew).旋转(rotate).缩放(scale).

             3D转换可以实现空间转换.

二.属性:

     1.transform属性:应用2D或3D转换;

        取值:none(默认值不进行任何转换).fransform-function(表示一个或多个转换函数:平移旋转,倾斜.缩放)

写法:(1)transform:rotate(30deg)角度为正值时顺时针旋转,负值时逆时针旋转.

        (2)transform:scale(x,y)x,y的值为0~1时缩小,大于1时放大或scalex()对x轴缩放scaley()对y轴缩放可以为负值当为负值时方向变反.

        (3).transform:skew(45deg)角度为正值时向左倾斜,角度为负值时向右倾斜或skewxaa()和skewy()

        (4).translate(x,y)平移可取值数值,百分比,也可以是负值也可以使用单向位移函数:translateX(x),translateY(y)

     2.transform-origin属性

        (1).默认情况变形的原点是我们元素的中心点.

           写法:transform-origin:x,y;关键字:right,top,bottom,top;%:

    3.transform-style属性

      (1)作用:使页面以2D/3D显示;

       (2)flat:默认,平面2D;

       (3).preserve-3D:元素在3D空间中展示;注意:必须在父类元素中设置;

        (4).如果对一个元素设置了 transform-style的值为flat ，则该元素的所有子元素都将被平展到该元素的 2D平面中进行呈现。沿着X轴或 Y轴方向旋转该元素将导致位于正或负 Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了 transform-style的值为preserve-3d ，它表示不执行平展操作，他的所有子元素位于 3D空间中

     4.3D转换

       (1)perspective 属性（中文意思是：透视，视角）

       perspective 属性设置镜头到元素平面的距离。所有元素都是放置在 z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是 300像素。

       (2)特点：

         a ，为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

         b ，只影响 3D 转换元素

        注意点；默认是 3D效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。试试 perspective属性。设置perspect=400px 。

       (3)3D 位移主要包含

          translateZ(z)

          translate3d(x,y,z)

          解释：对于没有 rotateX以及rotateY 的元素，translateZ的功能就是让元素在自己的眼前或近或远（结合黑板上的图）；

      (4)3D 旋转主要包含

          rotateX(deg)

          rotateY(deg)

          rotateZ(deg)

          rotate3d(x,y,z,deg)

       (5)3D 缩放主要包含

          scaleZ(z)

          scale3d(x,y,z)