FLIP IMAGE EFFECT

FLIP IMAGE EFFECT.

Με τον παρακάτω κώδικα μπορείτε να εναλλάξετε 2 εικόνες με flip effect. Μπορείτε να αλλάξετε τις διαστάσεις αλλάζοντας το width="320" height="200" που βρίσκεται αμέσως μετά το πράσινο link των εικόνων το οποίο link εννοείτε πως μπορείτε να το αλλάξετε με το δικό σας link. Δείτε πως θα εναλλάσονται οι εικόνες με το flip effect στο παρακάτω demo ▼.

<style>

.flip-container {perspective: 1000px;}

.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}

.flip-container, .front, .back {width: 320px;height:200px;}

.flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;}

.front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}

.front {z-index: 2;transform: rotateY(0deg);}

.back {transform: rotateY(180deg);}

</style>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">

 <div class="flipper">

  <div class="front">

<img src="http://i.imgur.com/gCr4ycDm.jpg" width="320" height="200"/>

  </div>

  <div class="back">

<img src="http://i.imgur.com/pyL40yfm.jpg" width="320" height="200"/>

  </div>

 </div>

</div>