使用 transform: rotateZ(180deg) translateY(2px) css 属性如何旋转下拉箭头？答案

【问题标题】：Using transform: rotateZ(180deg) translateY(2px) css Property how to rotate the dropdown arrow?使用 transform: rotateZ(180deg) translateY(2px) css 属性如何旋转下拉箭头？
【发布时间】：2021-07-31 12:42:22
【问题描述】：

gradeexpanded:false,

gradeOnClick: function (event) {
      this.gradeexpanded = !this.gradeexpanded;
    },

.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #F0F0F0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.gradeexpanded{
  transform: rotateZ(180deg) translateY(2px);
}

 <div
            class="dropdown-check-list"
            :class="{ visible: gradeexpanded }"
            tabindex="100"
          >
            <span class="anchor" @click="gradeOnClick"
              >Gtest</span
            >
            <ul class="items">
              <div class="checkbox-alignment-form-filter">
                <input
                  type="checkbox"
                  id="HR 2062 : 2011"
                  class="vh-product" value="H2011"
                  v-model="checkedNames"
                />
                <label class="productlist-specific" for="HR 2062 : 2011"
                  >H2011</label
                >
              </div>
              <div class="checkbox-alignment-form-filter2">
                <input
                  type="checkbox"
                  id="E250A"
                  class="vh-product"
                  v-model="checkedNames" value="E250A"
                />
                <label class="productlist-specific" for="E250A">E250A</label>
              </div>
           </ul>
           </div>

使用变换：rotateZ(180deg) translateY(2px); css 属性如何旋转下拉箭头。

我已经为html和css中的下拉代码编写了下面的代码，如下图所示我无法相应地旋转箭头图标。

问题目前，无论下拉菜单是否打开，它都保持在相同的状态。

【问题讨论】：

@click 事件监听器是 Vue 的一部分，如果您使用 vue.js，请务必添加该标签！
好像你会在这里添加它.dropdown-check-list .anchor:hover:after { right: 8px; top: 21%; transform: rotate(180deg) translateY(2px); }
顺便说一句，您将其设置为 -135，因此单击时使用 180 不会使其从该位置翻转 180 度。度数将来自其原始旋转 0 度。如果您的意图是让箭头指向上方，那么您需要 45 度。

标签： html css vue.js

【解决方案1】：

所以你在父 div 上切换类 gradeexpanded 对吗？所以css类应该是.gradeexpanded .achor:after吧？

.gradeexpanded .anchor:after {
   transform: rotate( 180deg);
  -webkit-transform: rotate( 180deg);
   transform-origin: bottom left;
}

【讨论】：

【解决方案2】：

尝试添加以下 css：

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}

const dropdown = document.querySelector(".dropdown-check-list");

dropdown.addEventListener("click", function () {
  this.classList.toggle("visible");
});

.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #f0f0f0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}

<div class="dropdown-check-list" tabindex="100">
  <span class="anchor">Gtest</span>
  <ul class="items">
    <div class="checkbox-alignment-form-filter">
      <input type="checkbox" id="HR 2062 : 2011" class="vh-product" value="H2011" />
      <label class="productlist-specific" for="HR 2062 : 2011">H2011</label>
    </div>
    <div class="checkbox-alignment-form-filter2">
      <input type="checkbox" id="E250A" class="vh-product" value="E250A" />
      <label class="productlist-specific" for="E250A">E250A</label>
    </div>
  </ul>
</div>

【讨论】：

【解决方案3】：

你能检查下面的代码吗？希望它对你有用。

代码：

.dropdown-check-list.gradeexpanded .anchor:after{
    transform: rotate( 45deg);
    -webkit-transform: rotate( 45deg);
    transform-origin: bottom left;
}

【讨论】：

【解决方案4】：

下拉箭头是一个伪元素，它是一个内联元素，Transform 属性不能应用于内联元素。只需将下拉箭头设为display: block，它就会按预期工作。

.dropdown-check-list .anchor:after {
 ...
 display: block;
}

【讨论】：