css3实现翻转效果

1、新建只有一个div的页面，给div加上简单的样式

2、然后在给div加上动画的过渡效果（transition: all 500ms ease;）加上这个后，所有属佣甲昭宠性（all）都会有过渡效果，及500ms内，ease的过渡又因为翻转需要3d效果，所以要加上 transform-style: preserve-3d;preserve-3d的意思是‘子元素将保留其 3D 位置’

5、当鼠标移到div上时，触发翻转效果#d1:hover { transform: rotateX(-90deg); }