css3实现翻转效果

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轴最下加上之后就能看到正常的翻转了