IcebergRage / CSS3-3D-Flip-Cards

CSS3 3D Flip Cards Effect

Testing 3D CSS Card Flip Effect

Testing how to implement a CSS3 Card Flip Effect.

###HTML Format

<div class="card-wrapper {class_efect}">
  <div class="card">
    <div class="front">
      <!-- FRONT SIDE -->
    </div>
    <div class="back">
      <!-- BACK SIDE -->
    </div>
  </div>
</div>

###Class Effects

.flip-right
.flip-left
.flip-up
.flip-down
.flip-diagonal-right
.flip-diagonal-left
.flip-inverted-diagonal-right
.flip-inverted-diagonal-left

###Flip Horizontal (Direction: Right)

<div class="card-wrapper flip-right">
  <div class="card">
    <div class="front">
      <!-- FRONT SIDE -->
    </div>
    <div class="back">
      <!-- BACK SIDE -->
    </div>
  </div>
</div>