今天了解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>
当我们加入了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>
效果图:
当将board样式中transform样式去掉时,效果如下:
比较明显地看出布局并未受明显地影响。如果觉得还不够明显,我们接着把.main li:nth-child(1)中transform的注释去掉:
由于transform变换默认以元素中心为基点,所以可以很明显看出元素中心点并未偏移。故transform对元素布局的影响并不存在。