如何从下拉列表中旋转/旋转180‘插入符号，最好只使用CSS？

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

select {
  appearance: none; /* 隐藏默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 去除边框 */
  padding: 5px; /* 设置内边距 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 设置鼠标样式为手型 */
  outline: none; /* 去除选中时的外边框 */
  transition: transform 0.3s; /* 添加过渡效果 */
}

select:hover {
  transform: rotate(180deg); /* 鼠标悬停时旋转180° */
}

select::after {
  content: ""; /* 添加内容 */
  position: absolute; /* 设置绝对定位 */
  top: 50%; /* 设置垂直居中 */
  right: 10px; /* 设置距离右侧的位置 */
  width: 0; /* 设置宽度为0 */
  height: 0; /* 设置高度为0 */
  border-left: 5px solid transparent; /* 设置左边框为透明 */
  border-right: 5px solid transparent; /* 设置右边框为透明 */
  border-top: 5px solid #000; /* 设置上边框为实线黑色 */
  transform: translateY(-50%); /* 垂直居中 */
  transition: transform 0.3s; /* 添加过渡效果 */
}

select:hover::after {
  transform: translateY(-50%) rotate(180deg); /* 鼠标悬停时旋转180° */
}