# 实现原理
- 在最外层的容器元素上设置整个动画区域的
perspective属性以实现3D效果 - 当外层容器元素遇到鼠标悬停事件时，内部存放卡片的容器旋转
- 卡片正面和背面的元素都要绝对定位，这样它们才能在相同位置相互遮挡。他们的背面可视性
backface-visibility属性设置为隐藏，这样每个卡片的背面在翻转时都是看不见的 - 卡片正面的z-index值要比背面大
- 鼠标没放上去之前让背面旋转180度，以背面示人
- 备注
- 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- perspective 属性只影响 3D 转换元素
- 不要为了防止元素溢出设置overflow属性，这将导致3D效果无法实现。
# HTML布局
<div class="container">
<div class="flip">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# CSS分析
# 元素布局
为了让卡片的正面和背面在相同位置重叠，给.front,.back相对定位 .flip 进行绝对定位
.container, .front, .back {
width: 300px;
height: 300px;
}
.flip {
position: relative;
}
.front, .back{
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index:2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 动画效果的实现
- 设置3d效果和动画
.container {
perspective: 1000;
transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
transform-style: preserve-3d;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 设置背面隐藏
.front, .back {
backface-visibility: hidden;
}
1
2
3
2
3
- 设置反转效果
鼠标没放上去之前让背面旋转180度，以背面示人
鼠标经过的时候 flip就翻转180度
.back {
transform:rotateY(-180deg);
}
.container:hover .flip {
transform:rotateY(180deg);
}
1
2
3
4
5
6
2
3
4
5
6
垂直翻转和水平翻转的区别
垂直效果与水平翻转异曲同工
但是如果你只是把rotateY换成rotateX
那么你会发现图片是以顶部的那条线翻转的。
因为默认的transform-origin值，是以元素的中心点为基本点翻转的。
解决方法：
(1). 给.flip设置和.front,.back相同的宽高。
(2). 给.flip设置transform-origin:100% 150px/高度的一半/属性。IE的适配
需要针对IE对这段标准的卡片翻转代码进行特殊的修改，因为IE还没有实现现代浏览器中的transform功能。基本的做法就是对正面和背面两个卡片同时分别翻转。
