Html 如何在单击时激活旋转而不是悬停是css

我对这个很陌生。我有三个盒子，两边都有信息。它们当前在

悬停时
旋转
，但我只希望它们在
单击时
旋转
。我如何做到这一点


.flip3D{
宽度：240px；
高度：200px；
利润率：10px；
浮动：左；
}
.flip3D>.front{
位置：绝对位置；
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
背景#FC0；
宽度：240px；
高度：200px；
边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D>.back{
位置：绝对位置；
-webkit变换：透视（600px）旋转（180度）；
变换：透视（600px）旋转（180度）；
背景#80bff；
宽度：240px；
高度：200px；
边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D:hover>.front{
-webkit变换：透视（600px）旋转（-180度）；
变换：透视（600px）旋转（-180度）；
}
.flip3D:hover>.back{
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
}

方框1-背面
方框1-正面
这需要一个javascript点击事件监听器。您还需要更新CSS以使用新创建的类（
.active
）而不是在
：hover
上进行更改


var-box=document.querySelector（'.flip3D'）；
addEventListener（“单击”，函数（）{
if（box.classList.contains（'active'））{
box.classList.remove（'active'）；
}否则{
box.classList.add（'active'）；
}
});
.flip3D{
宽度：240px；
高度：200px；
利润率：10px；
浮动：左；
}
.flip3D.正面{
位置：绝对位置；
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
背景：FC0；宽度：240px；高度：200px；边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D。返回{
位置：绝对位置；
-webkit变换：透视（600px）旋转（180度）；
变换：透视（600px）旋转（180度）；
背景：80bff；宽度：240px；高度：200px；边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D.active.front{
-webkit变换：透视（600px）旋转（-180度）；
变换：透视（600px）旋转（-180度）；
}
.flip3D.active.back{
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
}

方框1-背面
方框1-正面
您可以使用
：active
伪类。但是，
active
在
mousedown
时触发，在
mouseup
时未触发。不确定这是否符合您的要求。如果没有，您可能需要求助于带有
事件处理程序的
js
解决方案


.flip3D{
宽度：240px；
高度：200px；
利润率：10px；
浮动：左；
}
.flip3D>.front{
位置：绝对位置；
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
背景#FC0；
宽度：240px；
高度：200px；
边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D>.back{
位置：绝对位置；
-webkit变换：透视（600px）旋转（180度）；
变换：透视（600px）旋转（180度）；
背景#80bff；
宽度：240px；
高度：200px；
边界半径：7px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
转换：-webkit转换。5s线性0；
过渡：变换。5s线性0s；
}
.flip3D:active>.front{
-webkit变换：透视（600px）旋转（-180度）；
变换：透视（600px）旋转（-180度）；
}
.flip3D:active>.back{
-webkit变换：透视（600像素）旋转（0度）；
变换：透视（600像素）旋转（0度）；
}

方框1-背面
方框1-正面