Transform 转换

Transform 转换

css3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它分为2D转换 或 3D转换。

在css2时代，如果要做一些图片转化角度，都依赖于图片、Flash或javascript才能完成。但是现在借助css3就可以轻松移动、缩放、倾斜、翻转元素。通过css变形，可以让元素生成静态视觉效果，但也可以很容易结合css3的transition和动画keyframe产生一些动画效果。

Transform转化 2D的属性

退出的属性包含了属性名和属性值，而css3的transform属性使用函数来定义的。transform 2D函数包含了translate()、scale()、rotate()、skew()

1. tanslate() 函数

   translate() 方法，根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置移动，接受css的标准度量单位（px）

   translate(x, y)：转换，沿着x和y轴移动元素。

2. rotate() 函数

   通过rotate() 方法，元素顺时针给定的角度。运行负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。

3. scale() 函数

   通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的参数为宽，后面的参数为高。

   可取值：

   ​ 默认为1

   ​ 缩放：0-1之间的数

   ​ 放大：大于1的数

4. skew() 函数

   根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度，一个值只是水平轴的角度。此函数是指元素的倾斜角度，它以deg为单位。

div{
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    margin: 200px auto;
}

div:hover{
    /* 水平方向移动20px  垂直方向移动10px */
    /* transform: translate(20px, 10px); */

    /* 正数：顺时针旋转45度  负数：逆时针旋转45度 */
    /* transform: rotate(45deg);
    transform: rotate(-45deg); */

    /* 宽缩小0.5 高缩小0.5 */
    /* transform: scale(0.5, 0.5); */
    /* 宽放大1.5 高放大1.5 */
    /* transform: scale(1.5, 1.5); */

    /* 一个值时，水平方向和垂直方向为50度的倾斜  两个值时，第一个值为水平，第二个参数为垂直 */
    /* transform: skew(50deg, 50deg); */
}
        
"box">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26