Javascript 激活CSS翻转转换

我一直在学习Adam Khoury关于如何制作3d翻转动画的教程，该动画可以很好地与hover伪类配合使用，但我正在努力用java脚本激活转换。我的目标是单击该框以激活转换

Html：
方框1-背面
方框1-正面
方框2-背面
方框2-前
方框3-背面
方框3-前
CSS:
.flip3D{宽度：240px；高度：200px；边距：10px；浮点：左；}
.flip3D>.front{位置：绝对；-webkit变换：透视（600px）旋转（0度）；
变换：透视（600像素）旋转（0度）；
背景：FC0；宽度：240px；高度：200px；边界半径：7px；
-webkit背面可见性：隐藏；背面可见性：隐藏；
转换：-webkit转换.5s线性0；转换：转换.5s线性0；
}
.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度）；}

---

谢谢大家!

您可以使用jQuery来实现这一点。并在单击该框后触发悬停事件

试试这个

$('.box').click(function () {
  $('.animationElement').trigger('hover');
}

这将激活元素的悬停事件。更多的CSS将在这里采取行动，并触发动画

或者您可以使用一个类名，并将类名附加到元素中

$('.box').click(function () {
  $('.animationElement').attr('class', 'flip3D');
}

然后CSS将完成这项工作

只需使用.addClass（）：

$('.box').click(function () {
  $('.animationElement').attr('class', 'flip3D');
}