transform-origin:50% 0
然后加上scale(-1,1)就相当于沿着中间那条线对称了一下不是吗，为什么还要改变translate的值才能完全对称呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root{--hl:#1b2f90;
--bg:#f9f9f6 }
.dog{width: 300px;height: 400px;
position:relative;}
.center{position: absolute;
left: 50%;
transform: translate(-50%,0);}
.forehead{width: 102px;height: 48px;
background: var(--bg);
border-radius: 51px/40x 40px 8px 8px;}
.face{width: 110px;
height: 68px;
background: var(--bg);
border-radius: 51px / 40px 40px 8px 8px;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(--hl);
border-radius: 50%;
position: absolute;
z-index: 0;
left: 50%;
top: 34px;
transform: translate(-42px,0) rotate(10deg); }
.ear.right{transform: scale(-1,1) translate(-26px,0) rotate(10deg) scale(-1,1);
}
.eye{width: 24px;
height: 24px;
background: var(--bg);
border-radius: 12px/13px 12px 12px 2px;
position: absolute;
z-index: 2;
left: 50%;
top: 20px;
transform-origin: 50% 0;
transform:translate(-42px,0) rotate(10deg);
box-shadow: 1px 0px 0px 0px #000 inset,-1px 0px 5px 1px #ddd;}
.eye.right{transform: scale(-1,1) translate(-26px,0) rotate(10deg);}
</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 class="eye right"></div>
</div>
</body>
</html>17
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星