GitXplorerGitXplorer
w

CSS3-3D-Flip-Cards

public
5 stars
3 forks
0 issues

Commits

List of commits on branch master.
Unverified
6e6895e689dc362a60a22fda437756d01cafbc64

update readme

wwellingguzman committed 6 years ago
Unverified
58e72e265d68cdedf356f8e9b7e98913f6d0e043

improve the css

wwellingguzman committed 6 years ago
Unverified
81d3b041b835fd3f1976661795fa4d95f85b3311

update style to less

wwellingguzman committed 6 years ago
Unverified
9a76583d8a34c04f4f34f69b5051e3a4b4fc2f34

fix readme heading

wwellingguzman committed 6 years ago
Unverified
8b05d750ab23865d54812be4c2ab4444acc80f51

Update README.md

wwellingguzman committed 9 years ago
Unverified
d23e1128e30743841d706fe825401db147ec3bf8

Update README.md

wwellingguzman committed 9 years ago

README

The README file for this repository.

Testing 3D CSS Card Flip Effect

Testing how to implement a CSS3 Card Flip Effect.

HTML Structure

<div class="card-wrapper {class_effect}">
  <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
    </div>
    <div class="back">
      BACK
    </div>
  </div>
</div>

Add the width and height of the card:

.card-wrapper, .card {
  width: 200px;
  height: 200px;
}