2D:平面空间的元素变形

2D:平面空间的元素变形transform

变形属性：
transform：其属性值为功能函数，是占用空间的。

• 2D功能函数
  2D的位移
  2D的旋转
  2D的缩放
  2D的倾斜

• 2D的位移：
  transform：translate（x,y）;
  transform:translateX(x轴移动的距离)；
  transform:translateY(y轴移动的距离)；

• 2D的缩放：
  transform:scale(x,y);
  x , y这两个参数为数字，大于 1 为放大，反之为缩小
  transform:scaleX();
  transform:scaleY();

• 2D的旋转：
  transform:rotate(10deg);
  同样支持单方向旋转，其中正数为顺时针

• 2D的倾斜：
  transform:skew(20deg)；
  支持单方向倾斜。

 transform: translate(20px,30px) rotate(270deg) scale(2) ;
 /*可一属性多属性值，中间用空格隔开*/

多个功能函数共同使用的情况下，尽量先写位移 后写 其他的功能函数，避免其他函数对位移的影响。

• 改变变形原点：
  transform-origin:x y;
  属性值：left top right bottom center px %

 transform-origin: left bottom;/*以左下角为定点变形*/

• 目标伪类选择器：
  元素选择符:target{
  //当该元素被相关URL指向的时候，做样式的变换。}

  div{
            width: 300px;
            height: 0;
            background: rosybrown;
            text-align: center;
            line-height: 200px;
            color: #fff;
            font-size: 50px;
            font-weight: 600;
            margin: 0 auto;
            overflow: hidden;
            transition: 1s;
        }
        div:target{
            height: 200px;
        }/*点击后，高从0变到200px*/