CSS3--transform2D属性 By逆战班-Lawaice

CSS3中新增的transform属性分为2D变换和3D变换，而且对行内元素无效,在这先对2D属性进行了解

一、transform2D变换

1、先了解下transform的属性值

• 1、translate位移变换

translate(**x, y**)：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。 如果第二个参数未提供，则默认值为0，里面的数值可以是方位(left,right,left right等),也可以是百分数（表示自身宽高的百分比），还可以是具体的数值
translateX(<length>)：
指定对象X轴（水平方向）的平移
translateY(<length>)：
指定对象Y轴（垂直方向）的平移

Tips:可以利用此属性值实现居中效果，代码如下：

 <div class="box"></div>

.box{
      height:100px;
      width:100px;
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      background-color: blue;
}

• 2、rotate(**angle**)旋转变换：

指定对象的2D rotation（2D旋转，就是Z轴旋转），里面的数值是角度，顺时针方向为正值

• 3、scale(x, y)缩放：

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值，里面的数值是具体的数字，不能带单位。

scaleX(<number>)：
指定对象X轴的（水平方向）缩放
scaleY(<number>)：
指定对象Y轴的（垂直方向）缩放

Tips:利用此项属性我们能将字体大小以及边框进行缩小，浏览器的最小字体规定的12px，所以我们能将字体缩小到12px以下

<div class="box">
        <p>今天又下雨，又出太阳</p>
        <p>今天又下雨，又出太阳</p>
 </div>

.box{
        position: absolute;
       left:50%;
       top:50%;
       transform: translate(-50%,-50%);
       background-color: #000;
       font-size:12px;
       color:#fff;
 }
.box p:last-child{
      transform: scale(.8);
 }

• 4、skew(x, y)倾斜：

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0，里面的数值是角度

skewX(<angle>)：
指定对象X轴的（水平方向）扭曲
skewY(<angle>)：
指定对象Y轴的（垂直方向）扭曲

2、了解了transform2D变换的基本属性值，我们来了解一下它里面的解析顺序

我们主要探究旋转、位移和缩放的顺序关系
1、scale缩放和translate位移

<div class="box1"></div>
    <div class="box"></div>

  .box1{
            height: 200px;
            width: 200px;
            position: absolute;
            top:100px;
            left:50%;
            transform: translate(-50%);
            background-color: blue;
        }
        .box {
            height: 200px;
            width: 200px;
            margin: 100px auto;
            background-color: #000;
            /* transform: translate(200px)scale(1.2); 第一张图*/
           /* transform: scale(1.2)translate(200px); 第二张图*/
        }

我们可以从上图看出，旋转和位移优先级只跟书写顺序有关，在前面的先加载，那么我们接下来比较一下其中一个跟旋转的优先级

2、旋转rotate和位移translate

<div class="box1"></div>
    <div class="box"></div>

.box1{
            height: 200px;
            width: 200px;
            position: absolute;
            top:100px;
            left:50%;
            transform: translate(-50%);
            background-color: blue;
        }
        .box {
            height: 200px;
            width: 200px;
            margin: 100px auto;
            background-color: #000;
            /* transform: rotate(45deg)translate(200px); */
            transform: translate(200px)rotate(45deg);
        }

通过上面的图片，我们能够得出以下结论：

• transform执行的顺序只和书写的书序有关系，并且都是从前往后执行的，并没有什么角度优先一说，关于角度先书写的唯一的特点就是会改变x和y轴的方向