老师好，这段代码按照视频中去敲的 为何右耳那里没法和左耳对称
来源：2-1 汉克狗头部轮廓和耳朵
Jokerjue
2019-06-30 15:55:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-4</title>
<style type="text/css">
:root{--h1:#1b2f90;
--bg:#f9f9f6;
}
body{background:yellow;}
.center{ position:absolute;
left:50%;
transform:translate(-50%,0); }
.dog{width:300px;
height:400px;
position:relative;}
.forehead{width:102px;
height:48px;
background:var(--bg);
border-radius:51px/40px 40px 8px 8px;
z-index:1;
}
.face{width:110px;
height:68px;
background: var(--bg);
border-radius:50%;
top:20px;
z-index:1;
}
.chin{ width:104px;
height:36px;
background:var(--bg);
border-radius:52px/0px 0px 36px 36px;
top:60px;
z-index:1;
}
.ear{width:16px;
height:70px;
background: var(--h1);
border-radius:50%;
position:absolute;
transform-origin:50% 0;
left:50%;
top:34px;
transform:translate(-42px,0);
rotate:(9deg);
z-index:0;}
.ear.right{
transform:scale(-1,1)
translate(-26px,0)
rotate(9deg);
}
</style>
</head>
<body>
<div class="dog center">
<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>
</body>
</html>
1回答
-
樱桃小胖子
2019-06-30
1、代码问题
2、不能对齐是因为设置旋转角度，旋转了9度以后，右侧的耳朵有一定的倾斜度导致的，如果同学想要一模一样对齐显示，去掉右耳的旋转角度即可
希望可以帮到你！
0
相似问题