アニメーション効果を損なうことなくページの異なる部分に 'flip card' divを配置する

Question

私はaccepted answer hereをフォローしています。これはうまくいきます。

ただし、ドキュメントの異なる部分にボックスを配置してアニメーションを破棄したいとします。 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どういたしまして@phantom

.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