3D样式在“部分真机”的遮挡原因（跟z-index无关），导致点击不上绑定点击事件的元素
最近做的一个专题项目(梦幻西游-阳光魅力榜)，遇到一个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{
}
}
最后，非常感谢这两位小伙伴"槟爷"和"强哥"的鼎力帮助！
手机阅读请扫描下方二维码：
这种3D转换，还有一种思路就是两个翻转的图层都是翻转90度，正面是正常的显示，反面的初始状态是已经翻转了90度。当点击翻转的时候，正面先翻转90度，当到了90度那一瞬间，反面再从90度的值开始翻转。这样估计就不会有两个面重叠的问题了。例子可以看下百将行移动官网的新闻交互效果：http://bjx.163.com/m/index.html
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1