Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (71 sloc) 1.77 KB
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Playground</title>
<style>
* {
margin: 0;
border: 0;
}
.container {
width: 206px;
height: 206px;
margin: 0 auto;
position: relative;
perspective: 800px;
}
#card {
position: absolute;
width: 100%;
height: 100%;
/*transform-style: preserve-3d;*/
-webkit-transform-style: preserve-3d;
transition: transform 2s;
-webkit-transition: -webkit-transform 2s;
}
#card img {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#card .front:hover {
-webkit-transform: translateZ(-200px);
}
#card .back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
#card.flipped {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div id="card">
<img class="front" src="images/front.png" />
<img class="back" src="images/back.png" />
</div>
</div>
<br />
<br />
<button id="flip">Flip</button>
<script>
var button = document.getElementById("flip"),
card = document.getElementById("card"),
front = card.children[0],
back = card.children[1];
button.addEventListener('click', function() {
if (card.classList.contains('flipped')) {
card.classList.remove('flipped');
} else {
card.classList.add('flipped');
}
})
</script>
</body>
</html>
Something went wrong with that request. Please try again.