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~

      
查看更多关于CSS3-3D翻转_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110850