了解2D转换

转换之移动：

transform：translate（X，Y）；同时移动元素在水平方向和垂直方向的距离，中间用逗号隔开。

transform：translateX（）；只移动元素在水平方向上的距离

transform：translateY（）：只移动元素在垂直方向上的距离

例如：

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(200px,200px);
            
        }
    </style>
</head>
<body>
    <div></div>
</body>

我们设置了div盒子的移动，运行可以发现div盒子在水平方向和垂直方向都移动了200px。

transform：translateX（）；只移动元素在水平方向上的距离

例如：

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateX(200px);

        }
    </style>
</head>
<body>
    <div></div>
</body>

这样div盒子只在水平方向上移动了200px。

transform：translateY（）：只移动元素在垂直方向上的距离

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateY(200px);

        }
    </style>
</head>
<body>
    <div></div>
</body>

div盒子只在垂直方向移动了200px。

转换之旋转

transform：rotate（ deg);括号里面跟的是度数。

例如：

    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

我们将div盒子顺时针旋转了45度

旋转属性还有一个常见的属性：transform-origin 转换中心点这是设置元素旋转时以什么为中心点

1.transform-origin：X Y；中间用空格隔开

2.可以跟方位名词，默认的是50% 50%。

3.可以是px像素。

转换之缩放

transform：scale（X，Y）；里面跟的是数字不跟单位，倍数的意思。

例如：

    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <div></div>
</body>

这样设置div盒子的大小就被扩大了2倍。

2D转换的综合写法顺序;

我们同时有位移和其他属性时：我们需要把位移放到最前面。

猜你喜欢