css3中2D属性_css2d中xy轴-CSDN博客

本文链接：https://blog.csdn.net/qq_44193048/article/details/105613392

1.位移属性 translate( x , y )
当x为正的时候，则表示水平（x轴）向右移动x距离；负则向左移动x距离。y为正的时候，则表示垂直（y轴）向下移动y，负则向上移动x距离。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }

        .box2 {
            transform: translate(200px, 0px);
        }

        .box3 {
            transform: translate(-200px, 0px);
        }

        .box4 {
            transform: translate(0px, 200px);
        }

        .box5 {
            transform: translate(0px, -200px);
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
</body>

</html>

效果图：在这里插入图片描述
2.旋转属性 rotate(n)
n为正时，顺时针旋转n度，反之，逆时针旋转，单位为deg ，这里只说2D的。
css样式：

div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }

        .box2 {
            transform: translate(200px, 0px) rotate(45deg);
        }

        .box3 {
            transform: translate(-200px, 0px) rotate(-45deg);;
        }

在这里插入图片描述
3.缩放属性 scale( x , y )
表示width为原有的值的 x 倍，height为原有的值的 y 倍。

div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }

        .box2 {           
            transform: translate(200px, 0px) scale(2,1);
        }

        .box3 {
            transform: translate(-200px, 0px) scale(1,2);
        }

在这里插入图片描述
4、倾斜属性 skew()
skew( x, y) ,分别表示 X轴和 Y轴倾斜的角度，单位是deg。值可以为负，反方向。

div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }

        .box2 {
            transform: translate(200px, 0px)  skew(20deg,0deg);
        }

        .box3 {
            transform: translate(-200px, 0px) skew(-20deg,0deg);
        }

        .box4 {
            transform: translate(0px, 200px) skew(0deg, 20deg);
        }

        .box5 {
            transform: translate(0px, -200px)  skew(0deg,-20deg);
        }