css3 2D转换的综合写法

最新推荐文章于 2024-09-11 17:12:55 发布

黄丫丫07

最新推荐文章于 2024-09-11 17:12:55 发布

阅读量50

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_51495354/article/details/128066247

版权

本文介绍了CSS中transform属性的使用，强调了同时使用多个转换时顺序的重要性。当结合translate、rotate和scale等属性时，应注意位移应置于最前，并且顺序不同会导致转换效果的变化。示例代码展示了在鼠标悬停时，元素如何进行位移、旋转和缩放的组合动画效果。

摘要由CSDN通过智能技术生成

注意：

1 同时使用多个转换，其格式为：transform:translate() rotate() scale() ...等

2 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

3 当我们同时有位移和其他属性时，记得要将位移放到最前

<!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>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

            transition: all 1s;

        }



        div:hover {

            transform: translate(50px, 50px) rotate(180deg) scale(1.2);

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>