沿Y轴旋转“卡片”180度

Question

沿Y轴旋转“卡片”180度

jquerycsscss-transforms

3

我已经基本实现了这个功能（请参见https://jsfiddle.net/90ycrope/1/），但是第二个带有“behind”单词的div中的内容始终可见。

我试图实现两个目标：

1. 正确的功能（后面的内容在后面可见，前面的内容在前面可见） 2. 效率 - 我认为代码可能有更简单的方法？

HTML:

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

jQuery:

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

CSS：

.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 {
}

- Nick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

这里是一个简约且固定的翻转动画版本。我所做的如下:

仅应用高度和宽度到容器中，并添加position: relative属性。
前面和后面的元素相对于box_holder容器和背景位置绝对定位，并对这些子元素应用了背景颜色。
子元素的backface-visibility设置为隐藏。这是关键属性，因为它防止元素的背面出现。
最初，前面的元素没有旋转，但是通过Y轴旋转180度旋转后面的元素。由于以上设置，这使后面的元素消失在背面。
当单击元素并应用show_info类时，后面元素的旋转被抵消（旋转回0度），而前面元素则以相反的方向旋转180度。这两个元素一起使容器看起来像是被翻转了。

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

.box_holder {
  position: relative;
  width: 240px;
  height: 335px;
}
.box_holder .front, .box_holder .back {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  background: #C3C3C3;
  color: #3b3b3b;
  transition: 1s;
  backface-visibility: hidden;
}
.box_holder .back {
  transform: rotateY(180deg);
}
.box_holder.show_info .back {
  transform: rotateY(0deg);
}
.box_holder.show_info .front {
  transform: rotateY(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="box_holder">
  <div class="front">Some content here</div>
  <div class="back">Behind</div>
</div>

注意：使用prefix free库只是为了避免添加前缀版本，从而使代码臃肿。