css3 图片翻转效果

webkit内核浏览器下观看

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.Qcontainer {
 height: 100%;
 width: 28%;
 position: relative;
 -webkit-perspective: 800;
 float: left;
 margin-right: 2%;
}
.film {
 width: 100%;
 height: 15em;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: 1s;
}
.Qcontainer:hover .film {
 -webkit-transform: rotateY(180deg);
}
.face {
 position: absolute;
 -webkit-backface-visibility: hidden;
}
.back {
 width: 66%;
 height: 127%;
 -webkit-transform: rotateY(180deg);
 background: #3b3b3b;
 background: -webkit-linear-gradient(top,
 rgba(0,0,0,0.65) 0%,
 rgba(0,0,0,0) 100%);
 padding: 15%;
}


.front {
 z-index: 5;
}
.Qcontainer:hover .front {
 z-index: 0;
}
</style>
<script type="text/javascript"></script>
</HEAD>

<BODY>
<section class="Qcontainer">
 <div class="film">
 <div class="face front">
 <img src="img/goonies.jpg" alt="The Goonies" />
 </div>
 <div class="face back"><h5>HOT!</h5></div>
 </div>
</section>
</BODY>
</HTML>


你可能感兴趣的:(html5,css3,3D)