<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<h1 align = "center" ><i>画廊</i></h1>
<style type="text/css">
*{padding: 0;margin: 0;}
body
{
background-color: #f00;/*背景景色*/
color: yellow;/*通用字体颜色*/
font-family: 'Avenir Next','Lantinghei SC';/*字体样式*/
font-size: 16px;/*字体大小*/
-webkit-font-smoothing:antialiasezd;/*字体平滑*/
}
.wrap
{
width: 100%;
height: 600px;
position: absolute;/*垂直居中*/
top:50%;
margin-top:-200px;/*设为高度的一半*/
overflow: hidden;/*超出warp范围的样式不显示*/
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
/*海报样式*/
.photo
{
width: 300px;
height: 422px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,.01);/*阴影*/
border:3px solid yellow;
text-align: center;
}
.photo.side
{
width: 100%;
height: 100%;
background-color: #eee;
position: absolute;
top: 0;
right: 0;
box-sizing : border-box;/*padding和内容都在边框之内*/
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
.photo-wrap.side-front
{
-webkit-transform:rotateY(0deg);
}
.photo-wrap.side-back
{
-webkit-transform:rotateY(180deg);
}
.photo-wrap.side
{
-webkit-backface-visibility:visible;
}
.photo-front .photo-wrap{
-webkit-transform:rotateY(0deg);
}
.photo-back .photo-wrap{
-webkit-transform:rotateY(180deg);
}
.photo.side-front{}
.photo.side-front.image
{
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
.photo .side-front .image img
{
width: 100%;
}
.photo .side-front .caption
{
text-align: center;
font-size: 14px;
line-height: 10px;
top: 10%;
}
.photo.side-back{}
.photo.side-back.desc{
top:100px;
color: #f44;
font-size:14px;
line-height: 1.5em;
}
/*当前选中的海报样式*/
.photo-center
{
left: 50%;
top: 40%;
margin:-150px 0 0 -148px;
z-index: 999;
}
.photo-wrap
{
position: absolute;
width: 100%;
height: 100%;
-webkit-perspective:800px;
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
-webkit-transition:all 3s;
}
</style>
</head>
<body onselectstart = "return false;">
<div classs = "wrap">
<div class = "photo photo-center">
<div class = "photo-wrap">
<div class = "side side-front">
<p class ="image">
<img src= "srcs/lang.jpg"></p>
<p calss = "caption">可爱的狼</p>
</div>
<div class = "side side-back">
<p class ="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
Its_forever