Jquery 旋转'；卡片'；沿Y轴180度

我已经得到了这主要工作（见），但在第二节的内容与“后面”一词是可见的整个

我努力实现的两个目标是：

功能正确（后方内容可见，前方内容可见）

效率-我想代码有一个更简单的方法

HTML:

<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>

$(document).ready(function () {
  $('.box_holder').click(function () {
    $(this).toggleClass('show_info')
  });
});

.box_holder {
    display: block;
    position: relative;
    float: left;
    left: 8px;
    top: 8px;
    width: 240px;
    height: 335px;
    text-align: center;
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    background: #C3C3C3;
    color: #3b3b3b;
    font-size: 1em;
    line-height: 1.32;
    margin-right: 16px;
    margin-bottom: 32px;
    transition: 1s;
}
.box_holder.show_info {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .front {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .back {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.front {
    backface-visibility:hidden;
    transition:1s;
}
.back {
    transition:1s;
}
.show_info .back {
}

CSS:

<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>

$(document).ready(function () {
  $('.box_holder').click(function () {
    $(this).toggleClass('show_info')
  });
});

.box_holder {
    display: block;
    position: relative;
    float: left;
    left: 8px;
    top: 8px;
    width: 240px;
    height: 335px;
    text-align: center;
    font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    background: #C3C3C3;
    color: #3b3b3b;
    font-size: 1em;
    line-height: 1.32;
    margin-right: 16px;
    margin-bottom: 32px;
    transition: 1s;
}
.box_holder.show_info {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .front {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.box_holder.show_info .back {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.front {
    backface-visibility:hidden;
    transition:1s;
}
.back {
    transition:1s;
}
.show_info .back {
}

---

这里是翻转动画的一个极简和固定版本。以下是我所做的：

• 仅将高度、宽度应用于容器，并将

  位置：相对
  添加到容器

• 前面和后面的元素相对于盒子支架容器绝对定位，背景、颜色应用于这些子元素
• 子元素的

  背面可见性

  设置为隐藏。这是键属性，因为它防止元素的背面显示
• 最初，前元素不旋转，但后元素在Y轴上旋转180度。这会将后元素发送到后面，并由于上述设置而隐藏
• 当单击元素并应用show_info类时，背面的旋转元素为空（旋转回0度），而正面反向旋转180度。这两个元素一起使容器看起来好像正在翻转

$（文档）.ready（函数（）{
$（'.box_holder'）。单击（函数（）{
$（this.toggleClass（'show_info'））
});
});
.box\u支架{
位置：相对位置；
宽度：240px；
高度：335px；
}
.box\u支架。前，.box\u支架。后{
位置：绝对位置；
顶部：0px；
左：0px；
身高：100%；
宽度：100%；
文本对齐：居中；
背景：#C3C3；
颜色：#3b3b；
过渡：1s；
背面可见性：隐藏；
}
.box_支架。背面{
变换：旋转（180度）；
}
.box\u holder.show\u info.back{
变换：旋转（0度）；
}
.box_holder.show_info.前面{
变换：旋转（-180度）；
}

这里有一些内容
在…的后面
你好，哈里，请检查一下这个问题好吗