moshiuramit/flip.html

## flip.html
<html>
<html>
<head>
  <title>Fliping Card </title>
  <meta name="author" content="Moshiur Rahman ">
<style >

ul.jam{
  -moz-perspective:1000;
 }
.jam li{
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
  margin-bottom: 50px;
  list-style: none;
  position: relative;
  cursor: pointer;
  counter-increment: i; /* count the number of element(li) */
}

.jam li div{
  width: 100%;
  height: 100%;
  position: absolute;
  -moz-transition: all 1s;
  -moz-backface-visibility: hidden; /* hide the Reverse side of a div */
  box-shadow: 0 6px 10px -2px rgba(0,0,0,.8);
  border-radius: 4px;
}

.jam li .front{
  text-align: center;
  font-size: 40px;
  line-height: 200px;
  z-index: 10;
  color: rgba(55,39,49,.9);
  font-weight: bold;
  background: gray;
}

.jam li .front:after{
  content: counter(i); /* card number */
}

.jam li:hover .front{
  z-index: 0;
  -moz-transform: rotateY(180deg); /* Rotate 180deg when hover */
}

.jam li .back{
  -moz-transform: rotateY( 180deg); /* Rotated y axis 180 deg before hover */
  background: silver;
}


.jam li:hover .back{
  -moz-transform: rotateY(0deg); /* Back to 0 deg when hover */
}

.jam li .back img{
  padding-top: 30%;
  }

</style>
</head>
<body>


    <ul class="jam">
      <li >
        <div class="front">

        </div>
        <div class="back">
          <img src="./images/logo.png" alt="">
        </div>
      </li>

       <li>
        <div class="front">

        </div>
        <div class="back">
          <img src="./images/logo.png" alt="">
        </div>
      </li>

       <li>
        <div class="front">

        </div>
        <div class="back">
          <img src="./images/logo.png" alt="">
        </div>
      </li>

       <li>
        <div class="front">

        </div>
        <div class="back">
          <img src="./images/logo.png" alt="">
        </div>
      </li>
    </ul>
</body>
</html>
	<html>
	<html>
	<head>
	<title>Fliping Card </title>
	<meta name="author" content="Moshiur Rahman ">
	<style >

	ul.jam{
	-moz-perspective:1000;
	}
	.jam li{
	width: 200px;
	height: 200px;
	float: left;
	margin-right: 20px;
	margin-bottom: 50px;
	list-style: none;
	position: relative;
	cursor: pointer;
	counter-increment: i; /* count the number of element(li) */
	}

	.jam li div{
	width: 100%;
	height: 100%;
	position: absolute;
	-moz-transition: all 1s;
	-moz-backface-visibility: hidden; /* hide the Reverse side of a div */
	box-shadow: 0 6px 10px -2px rgba(0,0,0,.8);
	border-radius: 4px;
	}

	.jam li .front{
	text-align: center;
	font-size: 40px;
	line-height: 200px;
	z-index: 10;
	color: rgba(55,39,49,.9);
	font-weight: bold;
	background: gray;
	}

	.jam li .front:after{
	content: counter(i); /* card number */
	}

	.jam li:hover .front{
	z-index: 0;
	-moz-transform: rotateY(180deg); /* Rotate 180deg when hover */
	}

	.jam li .back{
	-moz-transform: rotateY( 180deg); /* Rotated y axis 180 deg before hover */
	background: silver;
	}



	.jam li:hover .back{
	-moz-transform: rotateY(0deg); /* Back to 0 deg when hover */
	}

	.jam li .back img{
	padding-top: 30%;
	}

	</style>
	</head>
	<body>


	<ul class="jam">
	<li >
	<div class="front">

	</div>
	<div class="back">
	<img src="./images/logo.png" alt="">
	</div>
	</li>

	<li>
	<div class="front">

	</div>
	<div class="back">
	<img src="./images/logo.png" alt="">
	</div>
	</li>

	<li>
	<div class="front">

	</div>
	<div class="back">
	<img src="./images/logo.png" alt="">
	</div>
	</li>

	<li>
	<div class="front">

	</div>
	<div class="back">
	<img src="./images/logo.png" alt="">
	</div>
	</li>
	</ul>
	</body>
	</html>