Flippable flash cards

flippable-flash-cards.markdown

Flippable flash cards

Flippable flash cards using css3 and font-awesome

A Pen by laurent on CodePen.

License.

index.html

<div class="container">
      
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flippable appcon ac-bicycle">
        <div class="front">
          <span>B</span>
          <i class="fa fa-bicycle"></i>
        </div>
        <div class="back">
          Bicycle
        </div>
      </div>
  </div>
  
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flippable appcon ac-car">
        <div class="front">
          <span>C</span>
          <i class="fa fa-car"></i>
        </div>
        <div class="back">
          Car
        </div>
      </div>
  </div>
      
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flippable appcon ac-truck">
        <div class="front">
          <span>T</span>
          <i class="fa fa-truck"></i>
        </div>
        <div class="back">
          Truck
        </div>
      </div>
  </div>
  
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flippable appcon ac-umbrella">
        <div class="front">
          <span>U</span>
          <i class="fa fa-umbrella"></i>
        </div>
        <div class="back">
          umbrella
        </div>
      </div>
  </div>
    
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flippable appcon ac-plane">
        <div class="front">
          <span>P</span>
          <i class="fa fa-plane"></i>
        </div>
        <div class="back">
          Plane
        </div>
      </div>
  </div>
</div>

style.less

@import "lesshat";

@g1:#161718;
@ge:#eeeeee;
@g5:#555555;
@b1:#1189d1;
@b2:#75d2c8;
@gr1:#18b755;
@y1:#f3b50b;
@o1:#ef4809;
@r1:#E82C0C;

body {
  background:@g1;
}
.container {
  height:120px;
  width:600px;
  margin:auto;
  position:absolute;
  top:0;bottom:0;left:0;right:0;
}

.flip-container {
  perspective: 1000;
  margin: 10px;
  float: left;
  cursor:pointer;

  .flippable {
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
  }
  
  &:hover{
    .flippable {
      transform: rotateY(180deg);
    }
  }
  
}

.flip-container, .front, .back {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
  border-radius: 5px;
}

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


.front {
  z-index: 2;
  color: white;
  
  span{
    font-size:20px;
    position:absolute;
    top:-30px;
    left:10px;
    font-family:verdana;
  }
}

.back {
  transform: rotateY(180deg);
  font-size: 18px;
  border:1px solid;
  font-family: Verdana;
  color: white;
}


.ac-bicycle{
  .front{
    background:@b1;
  }
  .back{
    background:darken(@b1,30%);
    border-color:lighten(@b1,30%);
  }
}
.ac-car{
  .front{
    background:@gr1;
  }
  .back{
    background:darken(@gr1,30%);
    border-color:lighten(@gr1,30%);
  }
}
.ac-truck{
  .front{
    background:@y1;
  }
  .back{
    background:darken(@y1,30%);
    border-color:lighten(@y1,30%);
  }
}
.ac-umbrella{
  .front{
    background:@o1;
  }
  .back{
    background:darken(@o1,30%);
    border-color:lighten(@o1,30%);
  }
}
.ac-plane{
  .front{
    background:@r1;
  }
  .back{
    background:darken(@r1,30%);
    border-color:lighten(@r1,30%);
  }
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />