1、新建只有一个div的页面，给div加上简单的样式
2、然后在给div加上动画的过渡效果（transition: all 500ms ease;）
加上这个后，所有属性（all）都会有过渡效果，及500ms内，ease的过渡
又因为翻转需要3d效果，所以要加上 transform-style: preserve-3d;
preserve-3d的意思是‘子元素将保留其 3D 位置’
3、然后利用伪类after，加上翻转的另一面。
4、现在看到的效果是上下两个div，接下要做的就是让上面那个在初始状态水品翻转90度
transform: rotateX(90deg);
5、当鼠标移到div上时，触发翻转效果
#d1:hover {
transform: rotateX(-90deg);
}
6、当鼠标触发hover时，会发现翻转有点奇怪，两块div中有很大的空隙
需要加上transform-origin属性
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用
left bottom的意思就是x轴最左，y轴最下
加上之后就能看到正常的翻转了
