本周末我一直致力于一个项目，适用于IE11，Chrome，FF和Android 5.0。
但是在使用iOS8的iPad上我会遇到一些非常不一致的行为。
http://codepen.io/trgraglia/pen/emrZGP
如果单击角上的多维数据集，则不会触发click事件。
所以我正在嵌入代码。 HTML：
<div class="cluster">
<div id="cube0_1" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube1_1" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube1_2" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube2_1" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube2_2" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube2_3" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube3_1" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube3_2" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
<div id="cube4_1" class="cube popable">
<!--<div class="bottom"></div>-->
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face front"></div>
<!--<div class="top"></div>-->
</div>
</div>
SCSS：
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.cluster {
position:absolute;
left:300px;
top:300px;
}
/* IE does not support preserve-3d. Therefore, the vendor ms comes last and the tranform here needs to be applied to the children for the ms vender prefix. */
.cube{
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-ms-transform-style: none;
}
.cube .face {
width:150px;height:60px;position:absolute;bottom:0;
outline: 1px solid transparent; /* For FF jagged edges */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.cube .front {
background-color:#94BFAC;
-webkit-transform: translateZ( 75px );
-moz-transform: translateZ( 75px );
-o-transform: translateZ( 75px );
transform: translateZ( 75px );
-ms-transform: translateZ( 75px );
}
.cube .back {
background-color:#BCD8CB;
border-left:1px solid #BCD8CB;
-webkit-transform: translateZ(-75px);
-moz-transform: translateZ(-75px);
-o-transform: translateZ(-75px);
transform:translateZ(-75px);
-ms-transform: translateZ(-75px);
}
.cube .right {
background-color:#BCD8CB;
-webkit-transform: rotateY(90deg) translateZ( 75px );
-moz-transform: rotateY(90deg) translateZ( 75px );
-o-transform: rotateY(90deg) translateZ( 75px );
transform: rotateY(90deg) translateZ( 75px );
-ms-transform: rotateY(90deg) translateZ( 75px );
}
.cube .left {
background-color:#A4CCBB;
-webkit-transform: rotateY(90deg) translateZ( -75px );
-moz-transform: rotateY(90deg) translateZ( -75px );
-o-transform: rotateY(90deg) translateZ( -75px );
transform: rotateY(90deg) translateZ( -75px );
-ms-transform: rotateY(90deg) translateZ( -75px );
}
/* translate3d(-19px, -11px, 0) on the front and other faces for IE is due to a required offset of the pieces not lining up with the floor. This is not needed if the floor is not used. */
#cube0_1 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:120px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:180px; }
}
#cube1_1 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:210px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:270px; }
cursor:pointer;
}
#cube1_2 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:270px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:320px; }
cursor:pointer;
}
#cube2_1 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:80px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:150px; }
}
#cube2_2 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:70px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:130px; }
}
#cube2_3 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:80px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:130px; }
}
#cube3_1 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:150px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:210px; }
cursor:pointer;
}
#cube3_2 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:110px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:170px; }
cursor:pointer;
}
#cube4_1 {
-webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
-moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
-o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
-ms-transform: none;
.front {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) translateZ(75px);
}
.back {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) translateZ(-75px);
}
.right {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) rotateY(90deg) translateZ(75px);
}
.left {
-ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) rotateY(90deg) translateZ(-75px);
}
.front,
.back,
.right,
.left { height:60px; }
&.popable:hover .front,
&.popable:hover .back,
&.popable:hover .right,
&.popable:hover .left { height:130px; }
}
JS - jQuery：
$(document).on('click', '.cube .face', function(){
alert($(this).parent().attr('id') + ' ' + $(this).attr('class'));
});
欢迎所有想法！感谢。
答案 0 :(得分：1)
这个解决方案让我疯了！
我需要将cursor:pointer;的CSS属性和值添加到可点击区域。令人难以置信！
How do I use jQuery for click event in iPhone web application