AngularJS Example:

by Felis Catus

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <h2>phonetest</h2>
  <div ng-controller="PhoneTest">
    <div class="phones">
      <div id="p1" class="flip-parent" ng-mouseenter="feature(1, true)" ng-mouseleave="feature(1, false)">
        <div class="flip-plane">
          <div class="front-face">
            battery
          </div>
          <div class="back-face">
            back side
          </div>
        </div>
      </div>
      <div id="p2" class="flip-parent" ng-mouseenter="feature(2, true)" ng-mouseleave="feature(2, false)">
        <div class="flip-plane">
          <div class="front-face">
            glass
          </div>
          <div class="back-face">
            back side
          </div>
        </div>
      </div>
      <div id="p3" class="flip-parent" ng-mouseenter="feature(3, true)" ng-mouseleave="feature(3, false)">
        <div class="flip-plane">
          <div class="front-face">
            bling
          </div>
          <div class="back-face">
            back side
          </div>
        </div>
      </div>
    </div>
    <div class="phone_container">
      <div class="flip_container" ng-repeat="phone in phones">
        <div class=zflip ng-class="{feat1: phone.feat.indexOf(1)>=0, feat2: phone.feat.indexOf(2)>=0,feat3: phone.feat.indexOf(3)>=0}">
          <div class="zbase">
            <div class="zfront">
              <img src="{{phone.img}}">
              <div ng-if="(phone.feat.indexOf(1)>=0)" class="zfeat feat1">
                battery
              </div>
              <div ng-if="(phone.feat.indexOf(2)>=0)" class="zfeat feat2">
                glass
              </div>
              <div ng-if="(phone.feat.indexOf(3)>=0)" class="zfeat feat3">
                bling
              </div>
            </div>
            <div class="zback">
              {{phone.descr}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.phones{ 
  background :brown;
  &:after {
    display: block;
    height: 0;
    content: '';
    clear: both;
  }
  margin-bottom: 10px;
 }
.flip-parent {
  &:last-of-type {
    clear: right;
  }

  position: relative;
  width: 100px;
  height: 100px;
  float:left;
  box-shadow: 0 0 3px #ccc;
  perspective-origin: 50% 50%;
  perspective: 300px;
  .flip-plane {
    transition: transform 500ms cubic-bezier(1, 1.49, 1, 1);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .front-face, .back-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    background: white;
    box-shadow: 0 0 0 1px orange inset;
    transform-style: preserve-3d;
    &:before {
      background: orange;
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 100%;
      transform: rotateY(90deg) translatex(5px) translatez(-5px);
    }
  }
  .front-face {
    transform: translateZ(5px);
    //background: rgba(150, 200, 0, 0.5);
    &:before {
      //background: purple;
    }
  }
  .back-face {
    //background: rgba(255, 255 ,255, 0.5);
    transform: rotateY(180deg) translateZ(5px);
  }
  &:hover {
    .flip-plane {
      transform: rotateY(180deg);
    }
  }
}
@mixin flip_hover() {
    perspective-origin: 50% 50%;
    perspective: 300px;
    .zfront, .zbase, .zback {
        z-index: auto !important;
    }
    &.fastflip {
        .zbase { transition-duration: 400ms !important; }
    }
    .zbase {
        transition: transform 500ms cubic-bezier(1, 1.49, 1, 1);
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .zfront, .zback {
        position: absolute;
        top: 0;
       ...

JavaScript

function PhoneTest($scope) {
  $scope.phones = [
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [1, 2]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [1, 2]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [1, 2]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [1, 2]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone2", feat: [1, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/samsung-galaxy-s7-edge-.jpg', descr:"pihone3", feat: [2, 3]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [1]},
    {img:'//cdn2.gsmarena.com/vv/bigpic/htc-10-r.jpg', descr:"phone1", feat: [2]},
   ...