CSS3-3D翻转_html/css_WEB-ITnose

本案例主要是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，改了旋转中心点

是不是很简单，接下来随意翻腾吧~

五、结语