CSS：transform顺序问题（translate()+rotate()）

最新推荐文章于 2023-08-07 19:43:58 发布

卡布达吃西瓜

最新推荐文章于 2023-08-07 19:43:58 发布

阅读量1.2k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46585382/article/details/130035401

版权

问题：下面两行代码在执行效果上有区别吗？

 transform:  translate(100px,100px) rotate(45deg);
 transform:  rotate(45deg) translate(100px,100px);

translate(X,Y)，可以使元素在x轴和y轴上平移。（在translate中，x轴右为正，但y轴下为正）

rotate(deg)，可以使元素旋转一定角度

在几何上分析，先平移后旋转，还是先旋转后平移是一样的。但在CSS中却并不是如此。我们先尝试运行一下：

<html>
    <head>
        <title>
            demo
        </title>
        
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                width: 100vw;
            }
            .container{
                position: relative;
                /* overflow: hidden; */
            }
            .item-1{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: blue;

                transform:  translate(100px,100px) rotate(45deg);
            }
            .item-2{
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: red;

            }
        </style>
    </head>
   
    <body>
        <div class="container">
            <div class="item-1"></div>
            <div class="item-2"></div>
        </div>
    </body>
</html>