2D转换(详解)

最新推荐文章于 2024-06-12 08:14:53 发布

screamn

最新推荐文章于 2024-06-12 08:14:53 发布

阅读量59

点赞数 1

分类专栏： CSS 前端文章标签： html css 前端

本文链接：https://blog.csdn.net/screamn/article/details/134330694

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

常见的transform属性值包括：

translate(x, y)：按指定的水平（x）和垂直（y）距离移动元素。
rotate(angle)：按指定的角度旋转元素，正值表示顺时针旋转，负值表示逆时针旋转。
scale(x, y)：按指定的比例缩放元素，x表示水平方向的缩放比例，y表示垂直方向的缩放比例，如果只指定一个值，则两个方向均按该值缩放。
skew(x-angle, y-angle)：按指定的角度倾斜元素，x-angle表示水平方向的倾斜角度，y-angle表示垂直方向的倾斜角度。

例如，要将一个元素向右下方平移100px，可以使用以下代码：

移动

translate(x, y)：

transform: translate(100px, 100px);

移动的时候坐标轴的方向

数值是正数的时候，会按照坐标轴正方向移动

旋转

transform: rotate(deg):

transform: rotate(45deg);

默认的旋转中心是盒子的中心，当度数是正数的时候，旋转是按照顺时针旋转的，负值的时候，是按照逆时针旋转的。

单位deg必须携带

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        .head{
            text-align: center;
            line-height: 300px;
            width: 300px;
            height: 300px;
            background-color: pink;
            transform: translate(10px,10px) rotate(45deg);
        }

    </style>
</head>
<body>
    <div class="head">
        123
    </div>
</body>
</html>

移动按照x，y轴的正方向移动10px的举例，使用ritate旋转45°

效果展示

更改旋转中心

transform-origin: x,y;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        .head{
            text-align: center;
            line-height: 300px;
            width: 300px;
            height: 300px;
            background-color: pink;
            transform-origin: 0 0;
            transform: translate(10px,10px) rotate(45deg);
        }

    </style>
</head>
<body>
    <div class="head">
        123
    </div>
</body>
</html>

旋转点的参数设置

缩放

transform: scale(1.5, 0.8);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        .head{
            text-align: center;
            line-height: 300px;
            width: 300px;
            height: 300px;
            background-color: pink;
            transform-origin: 100% 100%;
            transform: scale(50%,50%);
        }

    </style>
</head>
<body>
    <div class="head">
        123
    </div>
</body>
</html>