CSSでフリップカードを並べ替えること

Question

私はフリップカードでテキスト付きの画像を作成しています。私はそれらをサイトに置こうとしているので、約9人がいて、そのうち3人がお互いに隣り合っています。ここに私のコードです。あらかじめ問題を自分で解決できなかったので、実装方法を直接教えてください。私はHTMLやCSSを使ったエクスペリエンスを持っていないので、サイトのクイックフィックスが必要です。ありがとう！ 最後のHTMLビットは約9回再現されるため、実装は各コピーに対して効率的でなければなりません。

<style> #f1_container { 
    position: margin-left; 
    margin: 10px; 
    width: 150%; 
    height: 150%; 
    z-index: 1; 
} 

#f1_container { 
    perspective: 1000; 
} 
#f1_card { 
    width: 113px; 
    height: 170px; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 150%; 
    height: 150%; 
    backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    padding: 10px; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
} 
</style> 

<div id="f1_container"> 
<div id="f1_card" class="shadow"> 
    <div class="front face"> 
    <img src="http://img11.hostingpics.net/pics/714153square1.png"/> 
    </div> 
    <div class="back face center"> 
    <p>TContent</p> 
    <p>Content</p> 
    </div> 

Answer 1

.cardCont { 
 
    display: inline-block; 
 
    padding: 20px; 
 
} 
 

 
/*sets transition speed for the card flip you can change this*/ 
 
.Card { 
 
    height: 150px; 
 
    width: 150px; 
 
    border: 1px solid black; 
 
    transition: all .4s; 
 
} 
 

 
/*rotates on hover of outer div*/ 
 
.cardCont:hover .Card { 
 
    transform: rotateY(-180deg); 
 
} 
 

 
/*sets transitions for the front and back.. delay should half the transition this way this will only show when the card is half flipped*/ 
 
.Card .front, 
 
.Card .back { 
 
    transition: all .1s; 
 
    transition-delay: .2s; 
 
} 
 

 
/*fixes the fact that this will now be backwards and hides it normally*/ 
 
.Card .back { 
 
    transform: rotateY(180deg); 
 
    display: none; 
 
    width: 100%; 
 
} 
 

 
/*following 2 set default properties for the front and back.*/ 
 
.cardCont:hover .Card .front { 
 
    display: none; 
 
} 
 
.cardCont:hover .Card .back { 
 
    display: inline-block; 
 
}

<div class="cardCont"> 
 
    <div class="Card"> 
 
    <div class="front">Card1 Front 
 
     <br />you can put what you want in here.. this is the front</div> 
 
    <div class="back">Card1 Back 
 
     <br />you can put what you want in here.. this is the back</div> 
 
    </div> 
 
</div> 
 
<div class="cardCont"> 
 
    <div class="Card"> 
 
    <div class="front">Card2 Front 
 
     <br />you can put what you want in here.. this is the front</div> 
 
    <div class="back">Card2 Back 
 
     <br />you can put what you want in here.. this is the back</div> 
 
    </div> 
 
</div>