Javascript 有了这张经过CSS转换的翻页卡，我如何才能保持背面内容的可访问性？

我有一张翻页卡，我希望它的两面都可以点击并编辑内容，但我相信由于实现翻页转换涉及CSS，我只能访问正面；当卡片翻转时，背面无法点击。我怎样才能解决这个问题

类卡{
构造函数（）{
this.wrapper=document.createElement（“div”）；
this.wrapper.className=“包装器装载”；
this.card=document.createElement（“div”）；
this.card.className=“card”；
this.front=document.createElement（“div”）；
this.front.className=“front”；
this.front.contentEditable=true；
this.front.innerHTML=“提示符”；
this.back=document.createElement（“div”）；
this.back.className=“back”；
this.back.contentEditable=true；
this.back.innerHTML=“答案”；
this.card.appendChild（this.front）；
this.card.appendChild（this.back）；
this.wrapper.appendChild（this.card）；
document.body.appendChild（this.wrapper）；
}
}
let card=新卡（）
@导入url（'https://fonts.googleapis.com/css?family=Raleway:300');
身体{
字体大小：25px；
字体系列：“Raleway”，无衬线；
保证金：0；
背景色：#39243b；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}
.包装纸{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.卡片{
转变：转变2s；
宽度：600px；
高度：300px；
变换：透视（800px）；
背面可见性：隐藏；
位置：相对位置；
变换样式：保留-3d；
}
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
边界半径：10px；
宽度：100%；
显示器：flex；
身高：100%；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
字体系列：“Raleway”，无衬线；
背景色：白色；
}
.回来{
背面可见性：隐藏；
z指数：1；
变换：旋转（180度）旋转（180度）；
}
.前线{
z指数：2；
变换：透视（800px）；
}
.wrapper:hover.card{
变换：透视（800px）旋转（180度）；
}
从
.card
中删除
背面可见性：隐藏
，问题就会消失


类卡{
构造函数（）{
this.wrapper=document.createElement（“div”）；
this.wrapper.className=“包装器装载”；
this.card=document.createElement（“div”）；
this.card.className=“card”；
this.front=document.createElement（“div”）；
this.front.className=“front”；
this.front.contentEditable=true；
this.front.innerHTML=“提示符”；
this.back=document.createElement（“div”）；
this.back.className=“back”；
this.back.contentEditable=true；
this.back.innerHTML=“答案”；
this.card.appendChild（this.front）；
this.card.appendChild（this.back）；
this.wrapper.appendChild（this.card）；
document.body.appendChild（this.wrapper）；
}
}
let card=新卡（）
@导入url（'https://fonts.googleapis.com/css?family=Raleway:300');
身体{
字体大小：25px；
字体系列：“Raleway”，无衬线；
保证金：0；
背景色：#39243b；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}
.包装纸{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.卡片{
转变：转变2s；
宽度：600px；
高度：300px；
变换：透视（800px）；
/*背面可见性：隐藏*/
位置：相对位置；
变换样式：保留-3d；
}
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
边界半径：10px；
宽度：100%；
显示器：flex；
身高：100%；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
字体系列：“Raleway”，无衬线；
背景色：白色；
}
.回来{
背面可见性：隐藏；
z指数：1；
变换：旋转（180度）旋转（180度）；
}
.前线{
z指数：2；
变换：透视（800px）；
}
.wrapper:hover.card{
变换：透视（800px）旋转（180度）；
}
对于看到问题已发布的任何人，请注意编辑。现在，示例中正确地再现了该问题。