76 lines
1.8 KiB
HTML
76 lines
1.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Image Flip</title>
|
|
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
margin-top: 20px;
|
|
height: 300px;
|
|
font-size: 12px;
|
|
line-height: 1.5em;
|
|
font-family: "Lucida Grande", Verdana, Arial;
|
|
}
|
|
#flip-container {
|
|
position: relative;
|
|
margin: 10px auto;
|
|
width: 250px;
|
|
height: 261px;
|
|
z-index: 1;
|
|
}
|
|
.face.back {
|
|
display: none;
|
|
}
|
|
@media all and (-webkit-transform-3d) {
|
|
/* Use the media query to determine if 3D transforms are supported */
|
|
#flip-container {
|
|
-webkit-perspective: 1000;
|
|
}
|
|
#flip-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-transition: -webkit-transform 1s;
|
|
}
|
|
#flip-container:hover #flip-card {
|
|
-webkit-transform: rotateY(180deg);
|
|
}
|
|
.face {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
.face.back {
|
|
display: block;
|
|
-webkit-transform: rotateY(180deg);
|
|
-webkit-box-sizing: border-box;
|
|
padding: 10px;
|
|
font-size: 12pt;
|
|
color: white;
|
|
text-align: center;
|
|
background-color: #835A99;
|
|
-webkit-border-radius: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="flip-container">
|
|
<div id="flip-card">
|
|
<div class="front face">
|
|
<img src="poster-circle.png" width="250" height="261" alt="Poster Circle"/>
|
|
</div>
|
|
<div class="back face">
|
|
This flip effect is done entirely with 3D transforms and transitions—no JavaScript required!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|