Javascript 单击项目时如何进行CSS转换？

我在codepen上创建了一支钢笔。将卡悬停在元素上时，卡会旋转（特别是翻转）。我希望在单击元素（.card）时将其翻转

.card{
保证金：自动；
宽度：5em；
高度：8em；
背景色：透明；
透视图：250px；
}
.卡片内容{
位置：相对位置；
宽度：100%；
身高：100%；
边界半径：5px；
盒影：0px 5px 15px rgba（0,0,0,0.5）；
转变：转变0.5s；
变换样式：保留-3d；
}
.卡片：悬停.卡片内容{
变换：旋转（180度）；
}
.卡正面，
.退卡{
位置：绝对位置；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
}
.退卡{
边界半径：5px；
背景色：白色；
变换：旋转（180度）；
}

如果希望卡在每次单击时切换翻转，请尝试以下操作：

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;

card.addEventListener("click", () => {
    if(!flipped) {
        cardContent.style.transform = "rotateY(180deg)"
    }   else {
        cardContent.style.transform = "rotateY(0deg)"
    }
    flipped = !flipped;
});

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");

card.addEventListener("click", () => {
    cardContent.style.transform = "rotateY(180deg)";
});

或者，如果您希望卡片只翻转一次，请尝试以下操作：

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;

card.addEventListener("click", () => {
    if(!flipped) {
        cardContent.style.transform = "rotateY(180deg)"
    }   else {
        cardContent.style.transform = "rotateY(0deg)"
    }
    flipped = !flipped;
});

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");

card.addEventListener("click", () => {
    cardContent.style.transform = "rotateY(180deg)";
});

通过JavaScript实现时，从样式表中删除
.card:hover.card内容{transform:rotateY（180deg）；}
。
首先将
id
添加到
div
标记，其中
class=“card”
类似

HTML


只需更改
。卡：悬停。卡内容


至
.card.flip.card内容

并添加js代码：

演示：


const card=document.querySelector（“.card”）
card.onclick=\=>card.classList.add（'flip'）；
card.onmouseout=\u=>card.classList.remove（'flip'）
html，
身体{
边际：0px；
填充：0px；
边界：0px；
字体系列：“Roboto”，无衬线；
背景色：#96cfe1；
}
.集装箱{
填充：10%；
}
.卡片{
保证金：自动；
宽度：5em；
高度：8em；
背景色：透明；
透视图：250px；
}
.卡片内容{
位置：相对位置；
宽度：100%；
身高：100%；
边界半径：5px；
盒影：0px 5px 15px 00000080；
转变：转变0.5s；
变换样式：保留-3d；
}
.card.flip.卡片内容{
变换：旋转（180度）；
}
.卡正面，
.退卡{
位置：绝对位置；
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
}
.退卡{
边界半径：5px；
背景色：白色；
变换：旋转（180度）；
}

那么倒转呢？这能回答你的问题吗？我不理解你的函数语法
。onclick=.=>
。只需阅读文档->或->