这几个属性不能一起使用吗

来源:2-9 位移变形

从不学习

2021-02-26 13:11:28

相关代码:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 202px;
height: 202px;
margin: 50px auto;
border: 1px solid firebrick;
/* perspective:300px */
}

p {
width: 200px;
height: 200px;
background-color: sandybrown;
border: 1px solid firebrick;
}

.trans p{
transform:scale(3);
/* transform-origin: 0px 0px;
transform:rotate(20deg);
transform: skew(20deg,20deg);
transform: translate(0px ,-50px); */
}
</style>
</head>

<body>
<div class="trans">
<p></p>
</div>

</body>

</html>

问题描述:

我尝试了 如果只添加scale缩放属性是可以得,如果再加上skew斜切变形、translate位移变形、rolate旋转变形任意一个,scale就会失效

写回答

1回答

好帮手慕张

2021-02-26

同学你好,scale、skew、translate、rolate这几个属性是可以一起使用的。

检查元素可以发现只有最后translate属性值设置生效了,原因为:同名属性值的设置后面会覆盖前面的

http://img.mukewang.com/climg/6038b48b090634f217710714.jpg

解决:将所有属性值写在一个transform下,如下图:

http://img.mukewang.com/climg/6038b4b2093cebb207740225.jpg

另外需要注意一点就是这几个属性书写的先后顺序是会影响到效果的,可根据实际需要的顺序书写。

​祝学习愉快!

0

0 学习 · 15276 问题

查看课程