Transform变换

醉挽清欢

已于 2022-01-21 19:38:43 修改

阅读量312

点赞数

分类专栏： css 文章标签： css

于 2022-01-16 09:49:05 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122510063

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

transform属性

transform	描述
none	不变换
transform-function	一个或多个变换函数，以空格分开

我们主要讨论它进行变化时：

包含属性：

rotate旋转
skew扭曲
scale 缩放
translate移动

相关属性

transform-origin 旋转缩放的基点
transform-style 元素是3d效果还是2d效果

`rotate`旋转

概念

通过指定的角度参数对原元素指定角度的旋转
transform-origin定义的是旋转的基点
angle是指旋转角度，单位deg，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

用法

平面旋转（相当于3维空间内的Z轴旋转）

transform:rotate (<angle>);

3维空间内旋转

transform:rotate3d(<number>,<number>,<number>,<angle>)

3维空间内的X轴旋转

transform:rotatex(<angle>)；

3维空间内的Y轴旋转

transform:rotatey(<angle>)；

3维空间内的Z轴旋转

transform:rotatez(<angle>)；

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        margin-top: 50vh;
        margin-left: 50vh;
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

这是初始的样子
在这里插入图片描述
当我们将其旋转时

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        transform:rotate(30deg);
        margin-top: 50vh;
        margin-left: 50vh;
    }

效果如下
在这里插入图片描述

`translate`移动

概念

当值为正数时沿着右/下（看选择的是哪一个方向的移动）移动，当值为负数时沿着反方向移动

用法

2D平移

 transform:translate()；

水平平移

 transform:translatex()；

竖直平移

 transform:translatey()；

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        margin-top: 50vh;
        margin-left: 50vh;
    }
</style>
<body>
    <div>
    </div>
</body>
</html>

这是一开始的状态
在这里插入图片描述
移动后我们发现div往左往上移动了一段距离

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;x
        transform:translateY(-20vh) translatex(-20vh);
        margin-top: 50vh;
        margin-left: 50vh;
    }

效果图如下
在这里插入图片描述

`scale` 缩放

概念

值>1 放大
值<1 缩小
值=1 不变

用法

2D缩放

transform: scale()

水平缩放

transform: scalex()

垂直缩放

transform: scaley()

例子

首先，我们定义一个200*200的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        margin-top: 50vh;
        margin-left: 50vh;
        transform: scale(1.2);
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

效果图如下
在这里插入图片描述
当我们将其进行缩放时

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        margin-top: 50vh;
        margin-left: 50vh;
        transform: scale(2);
    }

效果图如下：
在这里插入图片描述

`skew`扭曲

概念

单位为deg

用法

斜切扭曲

transform:skew()

水平方向扭曲

transform:skewx()

垂直方向扭曲

transform:skewy()

例子

首先，我们设置一开始的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        margin-top: 50vh;
        margin-left: 50vh;
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

在这里插入图片描述
当我们将其扭曲后

    div{
        height: 200px;
        width: 200px;
        background-color: aqua;
        transform:skewX(20deg);
        margin-top: 50vh;
        margin-left: 50vh;
    }

效果图如下
在这里插入图片描述