<!DOCTYPE html>
<html>
<head>
<title>显示周几</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;padding: 0;
}
body{
font-family: "Microsoft Yahei";
-webkit-font-smoothing: antialiased;
background: #fff;
color: #555;
font-size: 14px;
}
@font-face{
font-family: myFont;
src: url(../font/MyriadPro-Light.otf);
}
/* 整体内容 */
.wrap {
width: 100%; height: 600px;
position: absolute; top: 50%;
margin-top: -300px;
background-color: #333;
overflow: hidden;
-webkit-perspective: 800px;
}
/* 海报样式 */
.photo {
width: 260px; height: 320px;
position: absolute;
z-index: 1; /* 此处: 设置给居中的海报 */
box-shadow: 0, 0, 1px rgba( 0, 0, 0, 0.01 );
}
.photo .side {
width: 100%; height: 100%;
background-color: #eee;
position: absolute; top: 0; right: 0;
padding: 20px;
box-sizing: border-box;
}
.photo .side_font {}
.photo .side_font .image {
width: 100%; height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side_font img {
width: 100%;
}
.photo .side_font .caption {
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side_back {
color: #666;
font-size: 14px;
line-height: 1.5em;
}
/* 当前选中的海报 */
.photo_center {
width: 260px; height: 320px;
top: 50%; left: 50%;
margin: -160px 0 0 -130px;
z-index: 999;
}
/* 负责3D翻转，这里只是把图片两面定位好 */
.photo_wrap {
position: absolute;
width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
}
.photo_wrap .side_font {
-webkit-transform: rotateY( 0deg );
}
.photo_wrap .side_back {
-webkit-transform: rotateY( 180deg );
}
.photo_wrap .side {
-webkit-backface-visibility: hidden;
}
/* 这里才是控制翻转，想要显示正面，把下面的 class 切换即可 */
.photo_font .photo_wrap {
-webkit-transform: rotateY( 0deg );
}
.photo_back .photo_wrap {
-webkit-transform: rotateY( 180deg );
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!-- 海报画廊 -->
<div class="wrap">
<!-- photo 负责2D平移旋转 最后的 class 负责翻转-->
<div class="photo photo_center photo_back">
<!-- photo_wrap 负责定位 -->
<div class="photo_wrap">
<!-- 图片正面 -->
<div class="side side_font">
<p class="image"><img src="images/1.jpg" alt="图片" /></p>
<p class="caption">麦兜我和我妈妈</p>
</div>
<!-- 图片背面 -->
<div class="side side_back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
