我们知道在css3中我们利用transform变形可以使我们的网页动起来,其中有各个属性,例如translate、scale、rotate、skew等属性。但是当我们使用多个变形属性的复合写法时,遇到一些自己所理解不了的问题,下面我就来总结一些出现的问题。
上代码:
初始状态的三个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.box3 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
效果图如下:
给box1和box2添加变形属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
transform: translateX(100px) scale(0.5);
}
.box3 {
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
transform: scale(0.5) translateX(100px);
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
效果如下:
我们先来解释一下box2和box3都做了怎样的变形
box2首先由100px缩放0.5,变成了50px,然后向右位移了100px;
box3首先应该向右位移100px,但实际是由于translate属性前有scal属性所影响,box3是向右位移了50px。
从上边的代码以及效果图我们可以看出,当我们使用复合写法时,缩放与位移的顺序不同,就出现了两个完全不同的效果。这个就是其中的问题之一。这其实时与复合写法的变形属性有关,transform的执行顺序是:先执行后写的属性,再执行前边所写的属性;而且translate属性会受到scale、rotate、skew属性的影响。
这只是一个简单的例子,如果需要了解更多,需要自己多动手试试其他的属性,看看会出现怎样的效果!