phantom phantom - 5 months ago 7
jQuery Question

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

I am following the accepted answer here, which is working great.

However, I want to place the boxes on different parts of the document, which is breaking the animation. The js fiddle can be found here which demonstrates how the code currently works (incorrectly)

Please see code below.

I hope what I want to achieve is clear. If not I can provide further information

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

You would like to wrap them with another wrapper's to accomplish this.

Because of that card flip effect depends on absolute positioning, You don't want to give absolute positioning on the same div element.

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

Comments