父子元素同时使用rotate的效果叠加

最新推荐文章于 2023-04-21 17:08:02 发布

coder_xsy

最新推荐文章于 2023-04-21 17:08:02 发布

阅读量1.6k

点赞数

分类专栏： css css3 文章标签： rotate

本文链接：https://blog.csdn.net/xiongshiyuan/article/details/82961156

版权

css 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css3

8 篇文章 0 订阅

订阅专栏

今天在做页面设计的时候使用到了transform：rotate（）；突然有一个想法，如果父元素使用了rotate ，子元素也使用了rotate，效果会发生什么叠加，叠加效果又是什么样的呢？？？

所以做了一个测试：

首先通过布局使父子元素的X轴和Y轴重合，然后改变父子元素rotateX的值，观察效果。

    /*css*/  
      .cover-container {
            width: 400px;
            height: 400px;
            border: 2px solid #1A9624;
            border-radius: 10px;

            margin: 10px auto;
            position: relative;
            top: 0px;
            left: 0px;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container-rotate{
            transform: rotateX(0deg);
        }

        .cover-container>img {
            width: 200px;
            border: 5px solid gray;
            border-radius: 5px;
            display: inline-block;
        }

        .location {
            transform: rotateX(0deg);
        }


    /*html*/
    <div class="cover-container container-rotate">
        <img class="location" src="./static/img/y1.jpg" alt="影" title="ying.jpg">
    </div>

效果如下：（图片来自百度）

1、父元素 rotateX(0deg) 子元素rotateX(0deg)：

父0 子0

2、父元素 rotateX(45deg) 子元素rotateX(0deg)：

父45 子0

3、父元素 rotateX(0deg) 子元素rotateX(45deg)：

父0 子45

4、父元素 rotateX(45deg) 子元素rotateX(45deg)：

父45 子45

总结：1、可以从结果中发现，存在效果叠加的情况。

2、按照我之前的设想，效果叠加可能是在三维空间中的效果叠加，即父元素旋转45度之后，子元素载旋转45度，相当于子元素旋转了90，这样的效果应该是子元素不可见了，但其实在实际效果中并不是如此，可以从结果4可以看出来。实际的效果叠加是顺序叠加，而不是三维空间下的效果叠加。父元素旋转45度之后，如果子元素再旋转45度，是在父元素旋转之后形成的子元素状态为初始状态情况下旋转45度，这样就相当于是一个新图像旋转了45度，不能叠加达到90度消失的效果。