css - 单击 if 内的链接时翻转卡片(仅使用 CSS)

Question

我应该创建一张卡片，当点击其中的链接时它会翻转。只使用 HTML/CSS。所以我创建了一个包含两个 div 的 div，每个 div 都包含一个链接。这样:

#btnLeft {
  width: 100px;
  height: 100px;
  position: relative;
    transition: transform 0.6s;
  transform-style: preserve-3d;
}

#uno {
  background-color: yellow;
}

#dos {
  background-color: red;
  transform: rotateY(180deg);

}

 #uno, #dos {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

#btnLeft:target {
    transform: rotateY(180deg);
}

<div id="btnLeft">
  <div id="uno">
    <a href="#btnLeft">hello</a>
  </div>
  <div id="dos">
    <a href="#btnLeft">hola</a>
  </div>
</div>

问题:点击“hello”时它工作得很好，但点击“hola”时它不起作用，为什么他们都有 id="btnLeft"？

Answer 1

目前您的两个链接具有相同的 ID。更改其中一个 ID，它工作正常。

<div id="btnLeft">
  <div id="uno">
    <a href="#btnLeft">hello</a>
  </div>
  <div id="dos">
    <a href="#btnRight">hola</a>
  </div>
</div>

#btnLeft:target {
  transform: rotateY(180deg);
}

https://jsfiddle.net/24vxkfe6/

这里有一些链接。希望这可以帮助。

here

here