<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
min-height: 100%;
background: rgba(17, 17, 17, 0.6);
}
body{
background-color: #111111;
color: #555;
font-family: 'Avenir Next', 'Lantinghei SC';
font-size: 14px;
/*-webkit-font-smoothing：none | subpixel-antialiased | antialiased
*none：对低像素的文本比较好
*subpixel-antialiased：默认值
*antialiased：抗锯齿
*-moz-osx-font-smoothing是mozilla给特定操作系统推出的特性增强
*设置grayscale对于图标字体表现更清晰，减轻次像素渲染带来的相邻像素色彩污染问题
*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header,footer{
width: 100%;
height: 6%;
background: rgba(17, 17, 17, 0.6);
position: relative;
}
/* 海报样式 s*/
.photo{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
box-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
.photo .photo-wrap .side-front .image{
width: 100%;
height: 88%;
}
.photo .photo-wrap .side > p{
width: 100%;
height: 88%;
}
.photo .photo-wrap .side-front .image img{
width: 100%;
height: 100%;
vertical-align: middle;/*使高度不够的图片居中显示*/
}
.photo .photo-wrap .side-front .caption{
text-align: center;
font-size: 16px;
}
.photo .photo-wrap .side-back .desc{
color: #666;
font-size: 14px;
line-height: 1.5em;
}
.detail{
position: absolute;
right: 8px;
width: 56px;
height: 100%;
background-color: #dba3a3;
border-radius: 100px;
/* margin: auto auto; */
text-align: center;
line-height: 36px;
}
.complete{
position: absolute;
left: 8px;
width: 56px;
height: 100%;
background-color: #dba3a3;
border-radius: 100px;
/* margin: auto auto; */
text-align: center;
line-height: 36px;
}
.photo .photo-wrap .side{
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
top: 0;
right: 0;
/*IE8+、Opera 以及 Chrome 支持 box-sizing 属性，Firefox 支持替代的 -moz-box-sizing 属性。
*box-sizing: content-box | border-box | inherit
*content-box：默认值，按W3C盒模型进行处理 (element width = border + padding + border + content)
*border-box：按IE6盒模型进行处理 (element width = content)
*/
/*padding: 20px;*/
box-sizing: border-box;/*import*/
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
/* 初始化时使 side-back 沿Y轴旋转180度，即在背面显示 */
.photo .photo-wrap .side-back{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
/*负责翻转*/
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;/*import 申明是3d转化很重要，没有的话只有一面了*/
-webkit-transform-style: preserve-3d;
/*
*transition 属性是一个简写属性(默认值：all 0 ease 0)，用于设置四个过渡属性：
*transition-property，定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔；all 则所有属性都将获得过渡效果
*transition-duration，规定完成过渡效果需要多少秒或毫秒，必须始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
*transition-timing-function，规定速度效果的速度曲线(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n))
*transition-delay，定义过渡效果何时开始
*/
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;/* Safari 和 Chrome */
-moz-transition: all .5s; /* Firefox 4 */
-o-transition: all .5s; /* Opera */
/*
*IE 10、Firefox、Opera 支持 transform-origin 属性，IE 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换），
*Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换），Opera 只支持 2D 转换
*transform-origin: x-axis y-axis z-axis; 设置旋转元素的基点位置
*x-axis：定义视图被置于 X 轴的何处。可能的值：left | center | right | length | %
*y-axis：定义视图被置于 Y 轴的何处。可能的值：top | center | bottom | length | %
*z-axis：定义视图被置于 Z 轴的何处。可能的值：length
*/
transform-origin: 50% 50% 0px;
-ms-transform-origin: 50% 50% 0px;/* IE 9 */
-o-transform-origin: 50% 50% 0px;/* Opera */
-webkit-transform-origin: 50% 50% 0px;/* Safari 和 Chrome */
-moz-transform-origin: 50% 50% 0px;/* Firefox */
}
.photo_front .photo-wrap{/* .photo_front 是添加到 div.photo 的类 */
transform:perspective(600px) rotateY(0deg);
-webkit-transform:perspective(600px) rotateY(0deg);
-moz-transform:perspective(600px) rotateY(0deg);
-o-transform:perspective(600px) rotateY(0deg);
-ms-transform:perspective(600px) rotateY(0deg);
}
.photo_back .photo-wrap{/* .photo_back 是添加到 div.photo 的类*/
transform:perspective(600px) rotateY(180deg);
-webkit-transform:perspective(600px) rotateY(180deg);
-moz-transform:perspective(600px) rotateY(180deg);
-o-transform:perspective(600px) rotateY(180deg);
-ms-transform:perspective(600px) rotateY(180deg);
}
</style>
</head>
<body>
<div class="photo photo_front">
<div class="photo-wrap">
<!--photo-wrap的正面！-->
<div class="side side-front">
<header id="head1"></header>
<p class="image">
<img src="images/10 灰姑娘.jpg">
</p>
<footer id="foot1">
<div class="detail">详情</div>
</footer>
</div>
<!--photo-wrap的反面！-->
<div class="side side-back">
<header id="head2">
<div class="complete" id="complete">完成</div>
</header>
<p class="desc">·每个女孩，心中都有一只水晶鞋。<br>
·Kindness is free. Love is free. 善良和爱都是免费的。<br>
·Where there is kindness, there is goodness.And where there is goodness, there is magic.<br>
·有善良之处即有美德，有美德之处即有魔力。<br>
·我也不知道那只美丽的玻璃鞋能否合我的脚。但是……如果合脚，你能接受这个真实的我吗？
</p>
<footer id="foot2"></footer>
</div>
</div>
</div>
<script>
/*1.翻面控制，每个元素的 onclick() 事件都绑定此函数，如果点击的元素不是中间的海报，则取得其
* id 进行重新排序，使其在中间显示；如果点击的是中间的海报则让它翻面，同时控制按钮也要翻面
*/
function turn(elem){
var cls = elem.className;
if(/photo_front/.test(cls)){
cls = cls.replace(/photo_front/, 'photo_back');
} else{
cls = cls.replace(/photo_back/, 'photo_front');
}
elem.className = cls;
}
window.onload=function () {
var $=function (_selector) {
return document.querySelector(_selector)
};
var elem=$(".photo");
$(".detail").onclick=function (){
turn(elem);
setTimeout(function (){
$("#head1").style.display="none";
},300);
return false;
};
$(".complete").onclick=function (){
turn(elem);
setTimeout(function (){
$("#head1").style.display="block";
},300);
return false;
};
//text：翻转后head1和head2重合5:5开了,所以才有上面的 $("#head1").style.display="none";
// $("#head1").onclick=function () {
// console.log(1);
// return false;
// };
//
// $("#head2").onclick=function () {
// console.log(2);
// return false;
// };
//
// $("#foot1").onclick=function () {
// console.log(1);
// return false;
// };
//
// $("#foot2").onclick=function () {
// console.log(2);
// return false;
// };
}
</script>
</body>
</html>
<!--
怒写小结（为什么会发怒，因为不开森呗--哈哈哈-自身免疫性强一会就好了~~~）：
1：photo-wrap:看做是一页纸，它分为正面和反面（布局）
正面：side-front
反面：side-back
2:初始化反面：.side-back{ transform: rotateY(180deg) };
3:photo-wrap 控制旋转，
通过改变js photo-wrap的父元素的类名（photo_front or photo_back），实现对photo-wrap 旋转控制
.photo_front .photo-wrap
.photo_back .photo-wrap
4：css属性使用，大家有必要研究的(暂时我也没有理解透彻，以后会写demo单独研究的)：
box-sizing: border-box;/*怪异模式：width=content*/
transform-style: preserve-3d；没有生明的话就成单页翻转模式了；
transition；
perspective；
transform-origin；
仿微信读取信息翻转效果（css3 D）
-->
仿微信读取信息翻转效果（css3 D）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
