前端 day17

一 2d

     1.概念：平面空间的元素变形。

     2.变形属性（transform：属性值（功能函数））：

     3.2d功能函数：

            2d的位移

            2d的旋转

            2d的缩放

            2d的倾斜

二 2d位移

        transform:translate(x,y);

        transform:translateX(x轴移动的距离);

        transform:translate(y轴移动的距离);

三 2d缩放

        transform:scale(x,y);

           x  y这两个参数为一个数字，大于1放大；小于1缩小。

        transform:scaleX();

        transform:scaleY();

四 2d旋转

      度数：+顺时针 -逆时针。

        transform:rotate(度数);

        transform:rotateX();

        transform:rotateY();

五 2d倾斜

        transform:skew(度数);

            指定x轴,y轴的倾斜。度数：+顺时针 -逆时针。

                transform:skewX(度数);

                transform:skewY(度数);

六 变形原点

       transform-origin:x y;

          属性值：

              left top

              10px 20px

              10% 20%

              center

七 缩放和旋转对位移的影响

       多个功能函数同时使用时，尽量先写位移，再写其他功能函数。因为如果旋转放在位移前时，会先旋转坐标系，元素在旋转后的坐标系里进行位移。（倾斜无影响）

八 目标伪类选择器

元素选择符：target{

           //当该元素被相关URL指向的时候，做样式的变换。     

}

九 3d

     1 平面空间：

               transform-style:flat;

      2 形成3d空间（让父元素形成3d空间、3d舞台）

               transform-style:preserve-3d;

     3 3d功能函数：

               1 3d位移

                          transform-style:preserve-3d;

                          transform:translate3d(x,y,z);

                          transform:translate();(z轴只能是像素，不能是百分比)

               2 3d缩放

               3 3d旋转