3D CSS Flip

by Rayudu Ikkurthi

HTML

<section class="container">
  <div id="card">
    <figure class="front">
        <input type="checkbox" id="one"/>one<br></br>
        <input type="checkbox" id="two"/>two<br></br>
        <input type="checkbox" id="three"/>three<br></br>
      </figure>
    <figure class="back" >
        <div id="append1">
            hello welcome1
        </div>
        <div id="append2">
            hello welcome2
        </div>
        <div id="append3">
            hello welcome3
        </div>
        <div id="close"><button>close</button></div>
    </figure>
  </div>
</section>

CSS

.container { 
  width: 200px;
  height: 260px;
  position: relative;
  -ms-perspective: 800px;
  perspective: 800px;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 1s;
}
#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  margin:0px;
  padding:0px;  
}
#card .front {
  background: red;
}
#card .back {
  background: blue;
    -ms-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}
#card.flipped {
  -ms-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}
#close{
    position:absolute;bottom:0px;right:0px;color:#fff;
}
@media all and (-ms-high-contrast:none)
		 {
			 #card.flipped figure {
			  backface-visibility: visible;
			  }
		 }

JavaScript

$('#one').click(function() {
        if ($(this).is(':checked')) {
          $("#card").addClass("flipped");
            $(".back #append1").css("display" , "block");
            $(".back #append2").css("display" , "none");
            $(".back #append3").css("display" , "none");
        }
    });
$('#two').click(function() {
        if ($(this).is(':checked')) {
          $("#card").addClass("flipped");
            $(".back #append2").css("display" , "block");
            $(".back #append1").css("display" , "none");
            $(".back #append3").css("display" , "none");
        }
    });
$('#three').click(function() {
        if ($(this).is(':checked')) {
          $("#card").addClass("flipped");
            $(".back #append3").css("display" , "block");
            $(".back #append2").css("display" , "none");
            $(".back #append1").css("display" , "none");
        }
    });
$('#close').click(function() {
    $("#card").removeClass("flipped");
    $('input[type="checkbox"]').prop('checked', false);
});