手風琴中的SVG在活動時不會保持一致-有解無憂

我最近嘗試創建一個僅添加了 SVG 的 HTML 和 CSS 手風琴，它在大多數情況下都可以作業，但是當我激活復選框時，我的問題出現了，我設定為 rotateY(180deg)，然后向下移動，走出標簽并進入我不想要的內容，我希望它與標簽保持原位并在其中旋轉，所以如果有人知道如何幫助我，請做。

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  position: relative;
  display: block;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  position: absolute;
  right: 5px;
  top: 50%;
  bottom: 0%;
  transform: translateY(-50%);
  transition: 0.5s;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  transform: rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

<div class="container">
  <div>
    <input type="checkbox" name="author-contact" id="1" class="radio" />
    <label for="1" class="label">How can i contact the author
      <svg width="100" height="50">
     <polygon points="90,20 100,30 80,30"/>
   </svg>
      </label>
    <p class="content">
      Donec dapibus risus tincidunt eros congue feugiat. Etiam pharetra sit amet ex vestibulum mattis. Aliquam erat volutpat. Fusce mattis, nibh at auctor malesuada, lacus dolor sodales nibh, et porttitor dui purus a ipsum. Aliquam venenatis mollis pretium.
      Etiam quis commodo lectus. Donec ac augue sit amet nisl aliquet dictum ut vel nunc. Nulla porta condimentum dolor, ut hendrerit turpis viverra sit amet. Fusce vel est quam. Quisque porttitor facilisis risus in lacinia. Proin laoreet mi ac libero
      venenatis, sed ornare eros vehicula.
    </p>
  </div>
</div>

這個 Youtube 視頻的結果是我試圖重新創建的

uj5u.com熱心網友回復：

布局：如果標簽是 display flex，則所有子元素將默認水平對齊。文本和 SVG 之間的空間由 justify-content 組成。

SVG：如果內容填滿視圖框，則更容易處理 SVG。我定義了一個 viewBox 并調整了多邊形以使兩者匹配。SVG 的高度在 CSS 中定義。

:root {
  --green: green;
}

.container,
label {
  background-color: var(--green);
  padding: 10px;
}

label {
  display: flex;
  justify-content: space-between;
}

label:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

label svg {
  height: 1em;
  transition: 0.5s;
}

.radio {
  display: none;
}

.radio:checked~label svg {
  transform: rotateX(180deg);
}

.content {
  display: none;
}

.radio:checked~.content {
  display: block;
}

<div class="container">
  <div>
    <input type="checkbox" name="author-contact" id="1" class="radio" />
    <label for="1" class="label">How can i contact the author
      <svg viewBox="0 0 20 10">
        <polygon points="10,0 0,10 20,10"/>
      </svg>
    </label>
    <p class="content">
      Donec dapibus risus tincidunt eros congue feugiat. Etiam pharetra sit amet ex vestibulum mattis. Aliquam erat volutpat. Fusce mattis, nibh at auctor malesuada, lacus dolor sodales nibh, et porttitor dui purus a ipsum. Aliquam venenatis mollis pretium.
      Etiam quis commodo lectus. Donec ac augue sit amet nisl aliquet dictum ut vel nunc. Nulla porta condimentum dolor, ut hendrerit turpis viverra sit amet. Fusce vel est quam. Quisque porttitor facilisis risus in lacinia. Proin laoreet mi ac libero
      venenatis, sed ornare eros vehicula.
    </p>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526684.html

標籤：htmlcsssvg标签手风琴

上一篇：可滾動的svg內容

下一篇：在Safari中，svg蒙版看起來像光柵一樣模糊