关于CSS3中transform属性对元素布局的影响。_transition rotate 影响before-CSDN博客

本文链接：https://blog.csdn.net/C860_zy/article/details/17587283

今天了解transform属性时发现一个奇怪的现象，就是使用transform属性的时候，无论是translate,rotate,skew还是scale，对于伪元素:after和:before，都会产生影响。具体的这个影响体现在哪里呢？我们通过一个例子来看一看（以下代码均针对webkit内核浏览器，其它浏览器鄙人还未去尝试）：

先贴代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .drop-shadow {
                width: 300px;
                height: 150px;
                position: relative;
                background: #ccc; 
                margin-left: 100px;       
                /* -webkit-transform: translate(20px,30px); */

            }

            .drop-shadow:before,
            .drop-shadow:after {
                content: "";
                position: absolute;
                z-index: -1;
                bottom: 15px;
                left: 10px;
                width: 50%;
                max-width: 150px;
                height: 20%;
                /*add box-shadow*/
                -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
                -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
                box-shadow: 0 15px 10px rgba(125,125,125,0.8);
                /*add css3 transform*/
                -webkit-transform: rotate(-3deg);
                -moz-transform: rotate(-3deg);
                -o-transform: rotate(-3deg);
                transform: rotate(-3deg);

            }

            .drop-shadow:after {
                right:10px;
                left: auto;
                -webkit-transform:rotate(3deg);
                -moz-transform:rotate(3deg);
                -o-transform:rotate(3deg);
                transform:rotate(3deg);

            }
        </style>
    </head>
    <body>
        <div class="drop-shadow">drop shadow effect</div>
    </body>
</html>

以上代码中，.drop-shadow样式中的transform属性被注释掉了，大家可以看看效果。这个效果是我在w3cplus中大漠的代码中改编出来的。类似于一个信息展示板，巧妙地利用了:after和:before两个伪元素。此时:after和:before给我们设置了z-index属性，因此可以很好地遮盖。

当我们加入了transform属性后，会发现，:after和:before居然是暴露在drop-shadow的上面！

于是乎，鄙人就提出了一个问题，到底transform属性是否会给元素布局带来影响呢？虽然此处:after和:before两个伪元素的位置和布局都没受影响，但是不可否认的是在视觉上（或者专业点说是在视图的渲染上）已经造成了影响。

那么我们接下来继续寻找问题的答案：

且看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .board {
            position: relative;
            overflow: hidden;
            width: 500px;
            height: 500px;
            /*-webkit-transform: skew(2deg);*/
            background: grey;
            float: left;
        }
        .main {
            list-style: none;
        }
        .main li:nth-child(1) {
            z-index: 2;
            position: absolute;
            width: 60px;
            height: 20px;
            background: blue;
            /*-webkit-transform: rotate(-45deg);*/
        }
        .main li:nth-child(2) {
            position: absolute;
            z-index: 1;
            width: 400px;
            height: 100px;
            padding: 30px;
            background: green;
        }
        .right {
            float: left;
            
        }
    </style>
</head>
<body>
    <div class="board">
        <ul class="main">
            <li>part1</li>
            <li>part2</li>
        </ul>
    </div>
    <div class="right">
        <ul class="side">
            <li>part3</li>
            <li>part4</li>
        </ul>
    </div>
</body>
</html>

效果图：