CSS中的拳击翻转效果

Question

我有这个样本：

.grey-background {
  background: #f6f6f6;
  padding: 85px 0 60px;
}
.flip-box {
  background: #fff;
  color: #000;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-bottom: 30px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.flip-box-before {
  font-weight: bold;
  letter-spacing: 0.2em;
  font-family: "Roboto Slab", serif;
  font-size: 1.714em;
  padding: 44px 40px;
  line-height: 38px;
  text-transform: uppercase;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.flip-box-before:hover + .flip-box-after {
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: 11111;
}

.flip-box-before:hover + .flip-box-before {
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.flip-box-after {
  position: absolute;
  width: 100%;
  font-size: 1.143em;
  top: 0;
  text-transform: capitalize;
  -webkit-transform: translate(0px, -100%);
  -moz-transform: translate(0px, -100%);
  -ms-transform: translate(0px, -100%);
  transform: translate(0px, -100%);
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  color: #999;
  z-index: -1;
}

<div class="grey-background">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="flip-box">
        <div class="flip-box-before">free shipping</div>
        <div class="flip-box-after">on all orders over $100</div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="flip-box">
        <div class="flip-box-before">free return</div>
        <div class="flip-box-after">free 90 days return</div>
      </div>
    </div>
  </div>
</div>

我想复制这个example。

下面（在网站上）你会找到我的意思。

你能告诉我为什么我的例子不能正常工作吗？我不知道什么是不完整和缺乏。

Answer 1

以下是原始代码中的错误：

• 选择器.flip-box-before:hover + .flip-box-before错误。它试图将样式应用于具有class = 'flip-box-before'的元素，该元素也是具有相同类的另一个元素的兄弟。标记中显然没有这样的元素，因此在此选择器中指定的transform永远不会被应用（因此默认文本不会移动）。

我建议的另一个更正是将transform应用于.flip-box，而.flip-box-before是容器元素，而不是.flip-box-before。这是因为:hover元素在悬停期间 被翻译 ，并且可能导致鼠标指针实际上位于元素的新边界之外。由于鼠标可能位于过渡端的新边界之外，因此反向效果（悬停）效果可能会自动触发，而不会实际悬停在框外（从而导致抖动效果）。在.flip-box上应用.grey-background { background: #f6f6f6; padding: 85px 0 60px; } .flip-box { background: #fff; color: #000; text-align: center; position: relative; cursor: pointer; margin-bottom: 30px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); overflow: hidden; } .flip-box-before { font-weight: bold; letter-spacing: 0.2em; font-family: "Roboto Slab", serif; font-size: 1.714em; padding: 44px 40px; line-height: 38px; text-transform: uppercase; transform: translate(0px, 0px); transition: all 0.2s ease-out 0s; } .flip-box:hover .flip-box-after { top: 50%; transform: translate(0, -50%); z-index: 11111; } .flip-box:hover .flip-box-before { transform: translate(0, 100%); } .flip-box-after { position: absolute; width: 100%; font-size: 1.143em; top: 0; text-transform: capitalize; transform: translate(0px, -100%); transition: all 0.2s ease-out 0s; color: #999; z-index: -1; }会避免这种情况，因为容器在任何时间点都不会移动。

以下是您的操作方法:( 在摘录中，这些框不在同一行，因为我还没有包含引导程序库。 这pen使用与以下相同的代码和bootstrap。 ）

＆＃13;

＆＃13;

<div class="grey-background">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="flip-box">
        <div class="flip-box-before">free shipping</div>
        <div class="flip-box-after">on all orders over $100</div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="flip-box">
        <div class="flip-box-before">free return</div>
        <div class="flip-box-after">free 90 days return</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;