在不破坏动画效果的情况下，将 'flip card' 个 div 放置在页面的不同部分

Question

我正在关注，效果很好。

但是，我想将框放在文档的不同部分，这会破坏动画效果。 js fiddle can be found here 演示代码当前如何工作（不正确）

请看下面的代码。

我希望我想要达到的目标是明确的。如果没有，我可以提供更多信息

html

<div class="wrapper">
  <div class="background-out box-1"></div>
  <div class="background-over box-1"></div>
  <div class="background-info">
    <div class="text">Text 1</div>
   </div>
</div>
<div class="wrapper">
  <div class="background-out box-2"></div>
  <div class="background-over box-2"></div>
  <div class="background-info">
    <div class="text">Text 2</div>
   </div>
</div>

css

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 0 20px;
}
.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.background-info {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100%;
  height: 100%; 
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: grey;
}
.background-info .text {
  padding: 5px;
}
.background-over {
  background-color: green;
  visibility: hidden;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
  visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px,0px,0px) rotateY(0deg);
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  visibility: visible;
  opacity: 1;
}

.box-1 {
  background-color: pink;
  left:200%;
  top:100%;
}

.box-2 {
  background-color: orange;
  left:500%;
  top:100%;
}

Answer 1

您想用另一个包装纸包装它们以完成此操作。

因为卡片翻转效果依赖于绝对定位，你不想在同一个div元素上给出绝对定位。

HTML

<div class="box-1 box">
  <div class="wrapper">
    <div class="background-out"></div>
    <div class="background-over"></div>
    <div class="background-info">
      <div class="text">Text 1</div>
     </div>
  </div>
</div>
<div class="box-2 box">
  <div class="wrapper">
    <div class="background-out"></div>
    <div class="background-over"></div>
    <div class="background-info">
      <div class="text">Text 2</div>
     </div>
  </div>

</div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 0 20px;
}
.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.background-info {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100%;
  height: 100%; 
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: grey;
}
.background-info .text {
  padding: 5px;
}
.background-over {
  background-color: green;
  visibility: hidden;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
  visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px,0px,0px) rotateY(0deg);
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
  -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  visibility: visible;
  opacity: 1;
}
.box {
  width: 100px;
  height: 100px;
}
.box-1 {
  position: absolute;
}

.box-2 {
  top: 100px;
  left: 200px;
  position: absolute;
}

See fiddle here

在不破坏动画效果的情况下，将 'flip card' 个 div 放置在页面的不同部分

placing 'flip card' divs on different parts of page without breaking animation effect

css

jquery

animation

flip