CSS_2D转换

在实际网页开发中会运用到很多的动态效果，其中2D平面的转换还是相对来说比较好用的。

那么什么是2D转换呢？以一个div盒子举例，它在页面内是平面的，可以设置宽高，但没有厚度，使用2D平面转换，可以使其实现倾斜、旋转、移动、翻转效果。

语法

transform:属性

元素{
    transform:属性
}

属性

translate（移动）

代码：

translate(x , y)

<style>
    div{
        transform:translate(100px , 50px)
    }
</style>

<div>我是一个盒子</div>

效果：

rotate（旋转）

代码：

rotate（n deg）n为数字，deg表示度

<style>
    div{
        transform:rotate（20deg）
    }
</style>

<div>我是一个盒子</div>

效果：

scale（缩放）

代码：

scale：（x轴倍数 , y轴倍数）

<style>
    div{
        transform:scale（2 ，4）
    }
</style>

<div>我是一个盒子</div>

效果：

skew（倾斜）

代码：

skew：（x轴倾斜角度 , y轴倾斜角度）

<style>
    div{
        transform:sekw（20deg ，40deg）
    }
</style>

<div>我是一个盒子</div>

效果：

matrix（2D集合）

语法：

matrix( 1 , 0 , 0 , 1 , 0 , 0 )

<style>
    div{
        transform:matrix( 1 , 0 , 0 , 1 , 0 , 0 )
    }
</style>

<div>我是一个盒子</div>

每个属性值分别为

1. 正常值为1，定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0

2. 正常值为0，定义的是 skew 定义 2D 倾斜

3. 正常值为0，定义的是 rotate 定义2D 旋转角度

4. 正常值为1，定义的是 scaleY 通过设置 Y 轴的值来定义缩放。值：>=0

5. 正常值为0，定义的是 translateX 通过设置 X 轴的值来定义左右位移。值：任意

6. 正常值为0，定义的是 translateY 通过设置 Y 轴的值来定义上下位移。值：任意