Transform 转换

最新推荐文章于 2023-03-14 22:30:05 发布

宸子涵

最新推荐文章于 2023-03-14 22:30:05 发布

阅读量344

点赞数

分类专栏： css精修文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_47938951/article/details/127956953

版权

css精修专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Transform 转换

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

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

Transform转化 2D的属性

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

tanslate() 函数

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

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

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

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

可取值：

默认为1

缩放：0-1之间的数

放大：大于1的数
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); */
}
        
<div id="box"></div>