Bootstrap Snippet 3D FLIP BUTTON using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>3D FLIP BUTTON</h1>
<!-- flip-to-top or flip-to-bottom -->
<div class="cube flip-to-top">
      <div class="default-state">
            <span>Hover</span>
      </div>
      <div class="active-state">
          <span>...and I flip</span>
    </div>
</div>
<a href="#" id="flipto" data-face="bottom">Flip: to bottom</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* CORE CSS */
body {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
/* Container box to set the sides relative to */
.cube {
  width: 250px;
  height: 100px;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* The two faces of the cube */
.default-state,
.active-state {
  height: 100px;
}
/* Position the faces */
.default-state {
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  transform: translateZ(50px);
}
.flip-to-top .active-state {
  -webkit-transform: rotateX(90deg) translateZ(150px);
  -moz-transform: rotateX(90deg) translateZ(150px);
  -o-transform: rotateX(90deg) translateZ(150px);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#flipto').on("click", function(event) {
  event.preventDefault();
  
  var face = $(this).data("face");
  
  if ( face == "bottom" ) {
    $(".cube").removeClass("flip-to-top").addClass("flip-to-bottom");
    $(this).data("face", "top").text("Flip: to top");
  } else {
    $(".cube").removeClass("flip-to-bottom").addClass("flip-to-top");
    $(this).data("face", "bottom").text("Flip: to bottom");
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3D FLIP BUTTON"
Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"3D FLIP BUTTON" Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"3D FLIP BUTTON"
Bootstrap 3.3.0 Snippet by rasheedbhutto