如何在 javascript 中創建按鈕以在單擊時預形成卡片翻轉

Question

.thecard:hover { 變換: rotateY(180deg) }

我想在用戶單擊卡片時執行此轉換。 我想知道如何制作一個 javascript 按鈕，該按鈕可以在用戶單擊卡片時執行此 function。

Answer 1

您可以使用 Javascript API element.animate()添加關鍵幀動畫並設置您希望它們如何工作。 我建議使用像caniuse這樣的網站來查看哪些瀏覽器與 API 兼容。

 let animation = document.getElementById("card") //If you just want to click on the card to flip it animation.addEventListener("click", turnCard) function turnCard (){ animation.animate([ // keyframes { transform: 'perspective(400px) rotateY(0)' }, { transform: 'perspective(400px) rotateY(180deg)' } ], { // timing options duration: 1000, iterations: 1 }) } //Using a button to flip the card const cardFlipper = () =>{ animation.animate([ { transform: 'perspective(400px) rotateY(0)' }, { transform: 'perspective(400px) rotateY(180deg)' } ], { duration: 1000, iterations: 1 }) }

 #card{ height: 400px; background-color: blue; width: 200px; }

 <div id="card"> </div> <button onclick="cardFlipper()">Flip Card</button>