关于是否覆盖的问题
来源：2-1 汉克狗头部轮廓和耳朵
1LBY1
2020-03-21 18:38:54
请问在.ear.right中的transform又设置了translate和rotate属性，和之前.ear中的方向大小差不多，是因为新的transform会把旧的覆盖吗，还是在原先基础上又平移和旋转？如果不是那.ear里设置的 transform-oringin在.ear.right里好像依然有用，这是什么规则啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css样式</title>
<style type="text/css">
:root {
--h1:#1b2f90;
--bg:#f9f9f6;
}
body{background:#ffc400;}
.dog{
width:300px;
height:400px;
position:relative;
}
.center{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.forehead{
width:102px;
height:48px;
background:var(--bg);
position:absolute;
left:50%;
transform:translate(-50%,0);
border-radius: 51px/40px 40px 8px 8px;
}
.face{
width:110px;
height:68px;
border-radius: 50%;
background-color:var(--bg);
border-radius:50%;
top:20px;
}
.chin{
width:104px;
height:36px;
background-color:var(--bg);
border-radius:52px/0px 0px 32px 32px;
top:60px;
}
.ear{
width:16px;
height:70px;
background:var(--h1);
border-radius: 50%;
position:absolute;
left:50%;
top:34px;
transform-origin: 50% 0;
transform: translate(-42px,0) rotate(30deg);
z-index:-1;
}
.ear.right{
transform: scale(-1,1) translate(-27px,0) rotate(30deg);
}
</style>
</head>
<body>
<div class="dog">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear "></div>
<div class="ear right"></div>
<div class="eye"></div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，可以这样理解。一开始.ear设置的是两只耳朵的样式，左耳朵和右耳朵会显示在同一个位置。然后通过.ear.right单独设置右耳朵样式，相同的样式才会进行覆盖，transform-origin属性是保留的。transform属性是进行了覆盖，而不是在原有样式上进行移动旋转的。
测试方式，把.ear中的transform样式去掉，右耳朵设置的transform属性实现的效果并不会改变。
自己可以测试理解下，祝学习愉快！
0
相似问题