Skip to content

Instantly share code, notes, and snippets.

@HeshamGhoniem2020

HeshamGhoniem2020/index.html

Created October 9, 2014 22:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HeshamGhoniem2020/b96b4c5b99fa7ec42625 to your computer and use it in GitHub Desktop.
Save HeshamGhoniem2020/b96b4c5b99fa7ec42625 to your computer and use it in GitHub Desktop.
Download ZIP
3D-Flipping-Card
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Flipping Card</title>
<link rel="stylesheet" href="css/stylesheet.css">
<meta charset="utf-8">
</head>
<body>
<ul>
<li>
<div class="front">1</div>
<div class="back"><img src="imgs/1942-game-preview.jpg" alt=""></div>
</li>
<li>
<div class="front">2</div>
<div class="back"><img src="imgs/AutomateYourMac.jpg" alt=""></div>
</li>
<li>
<div class="front">3</div>
<div class="back"><img src="imgs/creative-selfie-part-two.jpg" alt=""></div>
</li>
<li>
<div class="front">4</div>
<div class="back"><img src="imgs/drawabadgerscene-prev.jpg" alt=""></div>
</li>
<li>
<div class="front">5</div>
<div class="back"><img src="imgs/ms_400_277.gif" alt=""></div>
</li>
<li>
<div class="front">6</div>
<div class="back"><img src="imgs/nodejs-retina-preview.png" alt=""></div>
</li>
<li>
<div class="front">7</div>
<div class="back"><img src="imgs/photodune-5901812-professional-condenser-studio-microphone-s.jpg" alt=""></div>
</li>
<li>
<div class="front">8</div>
<div class="back"><img src="imgs/Preview-Image-400x277.jpg" alt=""></div>
</li>
</ul>
</body>
</html>
Raw
stylesheet.css
ul{
width:67%;
margin: auto;
-webkit-perspective: 2000;
-moz-perspective: 2000;
-ms-perspective: 2000;
-o-perspective: 2000;
perspective: 2000;
}
li{
width: 400px;
height: 277px;
float: left ;
list-style: none;
margin: 20px;
position: relative;
box-shadow: 0px 12px 2px -5px rgba(0,0,0,.3) ;
cursor: pointer;
}
div {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.front{
z-index: 10;
font-size: 180px;
line-height: 277px;
text-align: center;
background-color: #E2E0E1;
}
li:hover .front {
z-index: 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
li:hover .back{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.back{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment