最近做的一个专题项目(梦幻西游-阳光魅力榜)，遇到一个3D效果样式导致的问题附上项目地址：http://my.163.com/2016/ygmlb/m/index.html

大概描述下问题：

移动端 3D效果样式（3D翻转效果）导致在“部分真机”上，元素绑定的click事件点击无效，并不是js绑定点击事件方法bug或者不支持的原因，而是点击元素被遮挡了（谷歌浏览器所有模拟机和其他真机测试没问题，在“三星某个型号手机” 和“华为P7手机”绑定点击事件元素被遮挡了。），遮挡问题跟z-index层次高低无关。

3D翻转效果HTML部分代码简化如下：

    <div class="module">    
        <div class="info">
            <a class="l-btn" href="javascript:void(0);">点击这里翻转</a>
                内容前面        
        </div>
        <div class="info-desc">
            <a class="l-btn" href="javascript:void(0);">点击这里返回</a>
            背面       
        </div>
    </div>

3D翻转效果LESS部分样式(未修复前)简化如下：

    .module{
        width:6.55rem;
        height:7.59rem;
        perspetive:10rem;
        -webkit-perspective:10rem;
        position:relative;    
        .info, .info-desc{
            width:6.55rem;
            height:7.59rem;
            position:absolute;
            top:0;
            left:0;
            backface-visibility:hidden;
            transition:all 0.6s ease-out;
            -webkit-transition:all 0.6s ease-out;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
        }
        .info{
           z-index:2;
           transform:rotateY(0deg);
           -webkit-transform:rotateY(0deg);
           opacity:1;     
        }
        .info-desc{
            z-index:1;
            transform:rotateY(-180deg);
            -webkit-transform:rotateY(-180deg);
            opacity:0;
        }
        &.on{
            .info{
                transform:rotateY(180deg);
                -webkit-transform:rotateY(180deg);
                z-index:1;
                opacity:0;        
            }
            .info-desc{
                transform:rotateY(0deg);
                -webkit-transform:rotateY(0deg);
                z-index:2;
                opacity:1;       
            }
        }
        .l-btn{
            position:absolute;
            width:0.84rem;
            height:0.84rem;       
            top:3.3rem;
            left:5.6rem;
            z-index:3;
            display:block;
            
        }   
    }

解决问题曲折过程（可略过不看）：

1、一开始考虑到是不是被遮挡了，检查了一遍样式，样式代码层次高低，按道理正常啊，不过还是调整层次测试了一遍，问题依然存在

2、经过第一步测试后，猜想应该不是层遮挡原因吧，然后想应该是js方面的bug，想不通，于是求助小伙伴，如下处理：
点击事件简化代码：

    $(".module .l-btn").live("click",function(){ 
         alert(1); 
    })；

处理：
a、猜想会不会zepto(mixNIE).last.js，不支持live绑定？然后更改绑定事件写法，问题依然存在，如下：

        $(document).on("click",".module .l-btn",function(e){
            alert(1); 
        });

b、是不是跟页面没引入event.js有关？于是引入，问题依然存在..
然后： 更改点击对象，它的外层module作为点击对象，这样子点击有效。代码如下：

           $(document).on("click",".module",function(e){    
               alert(1); 
           });

c、猜想不是绑定事件方法的原因，然后返回检查元素层次，是不是被遮挡，检查元素之间z-index按道理没问题呀，不过还是试图改下加大z-index，测试后问题依然存在..

d、然后猜想，是不是3D效果原因导致的，于是更改样式如下： 注释掉如下几个3D辅助样式，但问题依然存在：

        perspective:10rem;
        -webkit-perspective:10rem; 
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;

...等等反复调试，问题依然存在。。
时间已经很晚啦，小伙伴有其他紧急的事要处理，然后暂时放下。。

3、第二天一大早，求助另一小伙伴。

处理：
a、更改z-index
b、更改点击对象为它的外层module
c、更改代码结构，把点击元素移外层，并调整z-index值
如下更改结构简化代码：

            <div class="module"> 
               <a class="l-btn" href="javascript:void(0);">点击这里翻转(返回)</a>   
               <div class="info">
                    内容前面        
                </div>
                <div class="info-desc">
                    背面       
                </div>
            </div>

...等等反复调试，问题依然存在。。

终于终于小伙伴找到解决方法了（*^_^*）~~

解决问题方法

3D效果的元素样式添加visibility样式，关键：visibility:hidden;
部分样式简化代码如下：

    .module{
    
        .info, .info-desc{
        }
        .info{
             z-index:2;
            transform:rotateY(0deg);
            visibility:visible; 
         }
        .info-desc{
            z-index:1; 
            transform:rotateY(-180deg);
            visibility:hidden; /*关键样式*/  
        }
        &.on{
            .info{       
                z-index:1; 
               transform:rotateY(180deg);
              visibility:hidden;        
            }
            .info-desc{
                z-index:2; 
                  transform:rotateY(0deg);
                  visibility:visible; 
            }
        }
        .l-btn{
        }   
    }

最后，非常感谢这两位小伙伴"槟爷"和"强哥"的鼎力帮助！