本案例主要是css3和html5，不会js也可以做动画◕.◕
一、首先看下主要需要的样式：
perspective
transform
transition
position
classlist
就这么多，水平有限就不细讲啦！
二、看效果：演示效果，runjs
3个效果默认样式如上图
看起来好乱，还是看演示吧，不放图了==演示效果，runjs
三、html结构如下：
3个容器6个盒子，当鼠标经过时：
1.box1绕x轴（transform-origin默认容器中心），翻转180°至背面box2，鼠标移开翻回
2.box3绕y轴（transform-origin默认容器中心），翻转180°至背面box4，鼠标移开翻回
3.box5，box6绕z轴，（transform-origin分别为容器左右），翻转180°，鼠标移开翻回
hello~
bye~
hello~
bye~
bye~
hello~

四、下面是样式：
1.容器上加了perspective子元素box有透视效果
2.box2,box4是背面所以先翻转-180°，这样当翻到后面再翻回时符合正常视觉
3.每个box都加了backface-visibility：隐藏被旋转的 div 元素的背面
4.box5，box6，改了旋转中心点

是不是很简单，接下来随意翻腾吧~
 五、结语