CSS - 切换多个 3d 动画

Question

我正在尝试使用两张 3d 卡来触发带有切换按钮的翻转。 问题是只有第一个卡片按钮当前切换了 3d 翻转动画，而第二个卡片按钮没有。

我正在关注本教程，但他目前只使用一个https://3dtransforms.desandro.com/card-flip

 let flip = document.querySelector('.flip'); let card = document.querySelector('.card'); flip.addEventListener('click', function() { card.classList.toggle('is-flipped'); });

 /*The 3d Area Boundary*/ .container { box-sizing: border-box; width: 100%; height: 170px; padding: 0; perspective: 800px; } /*The 3d Object - Flipping Card */ .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: center right; transition: transform 1s; } /*Sets Card face 2d, absolute and invisible when until flipped*/ .card-face { position: absolute; height: 100%; width: 100%; backface-visibility: hidden; } .front-card {} .back-card { transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); transform: translateX(-100%) rotateY(-180deg); }

 <div class="container"> <div class="card"> <div class="card-face front-card"> <p>Some Text.</p> <a class="uk-button uk-button-default" class="flip">Flip</a> </div> <div class="card-face back-card"> <p>Some MORE TEXT.</p> <a class="uk-button uk-button-default" class="flip">Flip</a> </div> </div> </div>

Answer 1

问题是只有第一个卡片按钮当前切换了 3d 翻转动画，而第二个卡片按钮没有

不，您的代码抛出以下错误：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

在一个元素中多次使用相同的属性（元素中的类）将简单地忽略除第一个属性之外的所有属性。

querySelector()只返回第一个匹配的元素。 您必须使用 class 定位所有元素，您可以使用querySelectorAll() 。 然后循环遍历它们以将事件附加到所有这些。

 let flip = document.querySelectorAll('.flip'); let card = document.querySelector('.card'); flip.forEach(function(el){ el.addEventListener('click', function() { card.classList.toggle('is-flipped'); }); });

 /*The 3d Area Boundary*/ .container { box-sizing: border-box; width: 100%; height: 170px; padding: 0; perspective: 800px; } /*The 3d Object - Flipping Card */ .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: center right; transition: transform 1s; } /*Sets Card face 2d, absolute and invisible when until flipped*/ .card-face { position: absolute; height: 100%; width: 100%; backface-visibility: hidden; } .front-card {} .back-card { transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); transform: translateX(-100%) rotateY(-180deg); }

 <div class="container"> <div class="card"> <div class="card-face front-card"> <p>Some Text.</p> <a class="uk-button uk-button-default flip">Flip</a> </div> <div class="card-face back-card"> <p>Some MORE TEXT.</p> <a class="uk-button uk-button-default flip" >Flip</a> </div> </div> </div>