鼻子部分错位，检查css发现translate句子没有生效，求助？
来源：2-6 汉克狗的鼻子
陈莺莺呀
2019-10-20 21:29:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dog</title>
</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="birthmark"></div>
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
<div class="nose center">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
</div>
<style>
:root{
--hl:#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);
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/0 0 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-origin:50% 0;
transform:translate(-42px,0) rotate(10deg);
}
.ear.right{
transform:scale(-1,1) translate(-26px,0) rotate(10deg);
}
.birthmark{
width:30px;
height:36px;
background: var(--hl);
border-radius:15px/17px 23px 2px 13px;
position: absolute;
z-index:1;
left:50%;
top:10px;
transform:translate(15px,0) rotate(-10deg);
}
.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(-44px,0) rotate(10deg);
box-shadow:1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd;
overflow: hidden;
}
.eye.right{
transform:scale(-1,1) translate(-21px,0) rotate(10deg);
box-shadow:1px 0 0 0 #000 inset;
}
.pupil{
width:26px;
height:26px;
background: #e79101;
border-radius:50%;
position: absolute;
left:3px;
top:1px;
box-shadow:0 0 8px 0 #000 inset;
}
.pupil:before{
width:18px;
height:18px;
background: #000;
border-radius:50%;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
content:'';
}
.pupil:after{
width:5px;
height:5px;
background: #fff;
border-radius:50%;
position: absolute;
left:3px;
top:7px;
content:'';
}
.nose{
width:62px;
height:32px;
background: #363035;
top:42px;
z-index:1;
border-radius:31px/10px 10px 22px 22px;
}
.nose:before{
content:'';
width:60px;
height:10px;
position: absolute;
left:50%;
top:1px;
transform:translate(-50% 0);
border-radius:30px/8px 8px 2px 2px;
background: linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
}
.nostril{
position: absolute;
width:15px;
height:4px;
top:19px;
background: linear-gradient(0deg,#363035 0%,#000 100%);
left:50%;
border-radius:50%;
transform:translate(-21px 0) rotate(30deg);
}
.nostril.right{
transform:translate(-7px 0) rotate(30deg) scale(-1,1);
}
</style>
</body>
</html>
1回答
-
你好同学，是因为两个属性值没有使用逗号隔开，如下加逗号即可：
另外，同学的代码中有很多transform设置的值的时候都没有加逗号，这里老师就不一一截图了， 自己把代码中所有设置transform的地方都检查一下，如果设置的不对，参考如上修改一下哦。
祝学习愉快，望采纳。
0
相似问题