Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script><div ng-app="flip" ng-controller="flipCtrl">
    <div class="flip"> 
        <div class="card" ng-click="isFlipped=!isFlipped">
            <div class="face front" ng-class="{'flipped':isFlipped}">
                Front
            </div> 
            <div class="face back" ng-class="{'flipped':!isFlipped}">
                Back
            </div> 
        </div> 
    </div> 
</div>
​
 
body {
 background: #ccc;   
}
.flip {
  perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}
.flip .card .flipped {
  transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: pointer;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden ;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}
.flip .card .front {
  transition:transform 0.5s ease-in-out;
  background: black;
  color: white;
}
.flip .card .back {
  transition:transform 0.5s ease-in-out;
  background: white;
  color: black;
}
 
var module = angular.module('flip', []);
module.controller('flipCtrl', function($scope) {});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers