<!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>
- 1 回答
- 0 关注
- 1787 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消