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轴最下

加上之后就能看到正常的翻转了