<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
body{
background-color: #fff;
color: #555;
font-family: "微软雅黑";
font-size: 14px;
font-smoothing:amtialiased;
}
.wrap{
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /*完成了垂直居中*/
background-color: #333;
overflow: hidden;
perspective: 800px;/*制造出一个3d的效果*/
}
/*海报样式*/
.photo{
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(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-front{
}
.photo .side-front .image{
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img{
width: 100%;
}
.photo .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}
.photo .side-back{
}
.photo .side-back .desc{
color: #666;
font-size: 14px;
line-height: 1.5em;
}
/*当前选择的海报样式*/
.photo_center{
left: 50%;
top:50%;
margin: -160px 0 0 -130px;
z-index: 999;
/* 设置水平,垂直居中的方法:
position: absolute;
left:50%
top:50%;
margin-left:-130px; 设置为宽度的一半
margin-top:-160px; 设置为高度的一半
*/
}
/*负责翻转*/
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
transform-style:preserve-3d;
transition: all 0.6s;
}
.photo-wrap .side-front{
transform: rotateY(0deg);
}
.photo-wrap .side-back{
transform: rotateY(180deg);
}
.photo-wrap .side{
backface-visibility: hidden;
}
.photo_front .photo-wrap{
transform: rotateY(0deg);
}
.photo_back .photo-wrap{
transform: rotateY(180deg);
}
</style>
</head>
<body onselectstart="return false;">
<div class="wrap">
<!-- photo 负责平移,旋转 -->
<div class="photo photo_center">
<!-- photo-wrap 负责翻转 -->
<div class="photo-wrap">
<div class="side side-front">
<p ckass="image"><img src="test.jpeg" style="height: 300px;"/></p>
<p class="caption">麦兜我和我妈妈</p>
</div>
<div class="side side-back">
<p class="desc">描述信息</p>
</div>
</div>
</div>
</div>
</body>
</html>
肯定一片黑，
.photo_front .photo-wrap{
transform: rotateY(0deg);
}
.photo_back .photo-wrap{
transform: rotateY(180deg);
}
理解一下
<div class='photo-wrap'>
<div class='div1'>正面</div>
<div class='div2'>反面</div>
</div>
现在是需要把photo-wrap下的div1和div2进行翻转，简单理解就是翻过去div1之后把div2展示出来。翻过去div2之后把div1展示出来。
你直接把photo-wrap翻转过去肯定什么都没有，就是一片黑。
你把手机放桌子上，翻过去手机是背面，再翻过来是正面。你要是把桌子翻过去还能看到手机吗？
.photo_front .photo-wrap .div1{//正面在上时 div1的样式
transform: rotateY(0deg);
}
.photo_front .photo-wrap .div2{//正面在上时 div2的样式
transform: rotateY(180deg);
}
.photo_back .photo-wrap .div1{//反面在上时 div1的样式
transform: rotateY(180deg);
}
.photo_back .photo-wrap .div2{//反面在上时 div2的样式
transform: rotateY(360deg);
}
图片的后缀名打错了吧