使用css/html/javascript将微笑转换为悲伤

我有代码来创建一个milee。现在我想要一个从0级到12级的滑动条，改变这个条的值，我想把这个微笑转换成悲伤

div.smileyface{
宽度：300px；
高度：300px；
位置：相对位置；
边界半径：150px；
-webkit边界半径：150px；
-moz边界半径：150px；
显示：块；
背景：#632；
背景：-webkit渐变（线性、左上、左下、从（#fffe8d）到（#f6d23e））；
背景：-莫兹线性梯度（顶部，#fffe8d，#f6d23e）；
盒影：插入0px-14px 14px rgba（0,0,0,3），0px 2px 20px rgba（0,0,0,6）；
-webkit盒阴影：插入0px-14px 14px rgba（0,0,0,3），0px 2px 20px rgba（0,0,0,6）；
-moz盒阴影：插入0px-14px 14px rgba（0,0,0,3），0px 2px 20px rgba（0,0,0,6）；
}
p、 眼睛{
宽度：50px；
高度：80px；
背景：#222；
边界半径：100px/160px；
-webkit边界半径：100px 160px；
-moz边界半径：100px/160px；
位置：绝对位置；
顶部：40px；
盒影：0 2px 0 rgba（255255,0.8）；
-网络工具包盒阴影：0 2px 0 rgba（255255255,0.8）；
-moz盒阴影：02px0rgba（255255255,0.8）；
}	
p、 眼睛，左眼{
左：75px；
}
p、 眼睛，右眼{
右：75px；
}
微笑{
宽度：200px；
高度：70像素；
边框：10px实心#222；
边界顶部：0；
背景：rgba（0,0,0,0）；
-moz边界半径：0 0 120px 120px/0 0 90px 90px；
-webkit边界半径：0 0 120px 120px 0 0 90px 90px；
边界半径：0 0 120px 120px/0 0 90px 90px；
位置：绝对位置；
底部：50px；
左：38px；
盒影：0 2px 0 rgba（255255,0.8）；
-网络工具包盒阴影：0 2px 0 rgba（255255255,0.8）；
-moz盒阴影：02px0rgba（255255255,0.8）；
}
街角{
宽度：10px；
高度：30px；
背景：#222；
边界半径：100px/160px；
-webkit边界半径：100px 160px；
-moz边界半径：100px/160px；
位置：绝对位置；
顶部：-12px；
-webkit变换：旋转（65度）；
-moz变换：旋转（65度）；
左-12px；
}
右下角{
左：202px；
-webkit变换：旋转（-65度）；
-moz变换：旋转（-65度）；
}

您希望将滑块位置映射到css transform属性的值

<input type="range" id="mySlider" value="90" onChange='changeSmile()'>

function changeSmile() {
  const val = document.getElementById("mySlider").value;
  const smileDiv = document.getElementById('smile').style.transform = `rotate(${val}deg)`;
}

函数{
const val=document.getElementById（“mySlider”）.value；
const smileDiv=document.getElementById（'smile'）.style.transform=`rotate（${val}deg）`；
}

---

然后将其从class smile更改为id。类是泛型的，id是特定于元素的。

我将按照以下方式进行操作：

创建仅底部边框可见且边框半径设置为50%的div，使其成为半圆（微笑）

：）

当滑块值更改时，塑造并更改边框半径，使其从微笑变为无言的脸

：|

现在，完成此操作后，使其变为悲伤的脸查看滑块值是否低于50%，如果是，则将div旋转180度，随着值从增加边框变低半径再次在相反方向上给出半圆，从而导致悲伤的脸

：（

因此，滑块不同值期间的不同值应如下所示：

滑块值100-边框半径50%-旋转0

滑块值50-边框半径0%-旋转0

滑块值0-边框半径50%-旋转180度

演示：

---

哦，而且你还需要在Y轴上转换div，其值等于“-height of div”，尝试从演示中删除transformY代码，然后尝试，你就会知道原因：）

请在边栏添加你尝试的代码示例。为什么你在与java无关的情况下标记这个问题

java

？