transform属性单独定义和复合写法的区别
2017-09-26 本文已影响26人
暗恋桃花源丫
我们直接以一个示例开始：
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transform属性单独定义和复合写法的区别</title>
<style type="text/css">
.box1, .box2, .box3 {
float:left;
width:100px;
height:100px;
margin:100px;
background:red;
transform:rotate(20deg);
}
.box1:hover {
transform:scale(2);
}
.box2 {
background:blue;
transform:rotate(20deg);
transform:scale(2);
}
.box3 {
background:green;
transform:rotate(20deg) scale(2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
鼠标未经过红色盒子.png
鼠标经过红色盒子.png
可以看出红色盒子鼠标经过时和蓝色盒子的transform:scale(2);都覆盖了transform:rotate(20deg);属性；
因为transform属性单独定义时，它们其实都是一个系列的属性（都是transform 开头），所以是按照最后定义的属性渲染，要想让属性同时起作用，就要用示例中的box3中的复合写法
transform:rotate(20deg) scale(2);，这样就会同时起作用。
当然，
translatex() = translatex(<translation-value>),
skew() = skew(<angle>[,<angle>]?)
也是一样，这里就不多说了。
最后附上一个正确的transform的复合写法：
transform: translate(<translation-value>[,<translation-value>]?) rotate(<angle>) scale(<number>[,<number>]?) skew(<angle>[,<angle>]?);
声明：此文只代表个人见解，只供参考！联系QQ：1522025433
