Question

在OSX上的Chrome上，在3D中旋转元素并在子元素上执行旋转的反转会破坏子项上的鼠标事件，包括任何链接。命中区域似乎未对齐。

dom结构是：

<div class='test'>
    <div><a href='http://www.google.com'>Click me</a></div>
</div>

请参阅此示例http://jsfiddle.net/rGY5Q/

是否有人知道使用保留正确点击区域的相同dom结构的解决方法？

Answer 1

-webkit-transform属性可能在分别显示rotateX(90deg)或rotateX(-90deg)中的任何元素时正常运行。

而在rotateX(90deg)，不会期望元素呈现＆＃34;可查看＆＃34;或＆＃34;可见＆＃34;。

元素将被平铺＆＃34;沿着X轴，就像它一样。

在rotateX(90deg)，css可能是transform只是那个元素 - 90 deg（rees） sic < / em>的

请分别查看链接的jsfiddle，其中css trasform属性设置为rotateX(45deg)，rotateX(-45deg)，以rotateX((n)deg)查看预期的45deg进度}。

同样，transform属性可能只是尝试获得true 90 deg（ree） sic 角度， X轴可能类似于 - ，如果可见 -

_

或＆＃34;地平线＆＃34;。

| - Y轴

_ - X轴

jsfiddle http://jsfiddle.net/guest271314/3XpFG/

编辑（更新，解决方法）

您的回答未提及可点击区域。另外，你的演示没有提供保留点击区域的解决方法。 - Mark Lundin

如果要求包括将css属性rotateX()值设置为90deg，则element可能会显示为与display : none;类似，即呈现几乎＆＃34;隐形＆＃34;在screen。见http://jsfiddle.net/guest271314/N6MdE/

变通方法

1）适用于 a）和b）两个选项

HTML

 <a href='htpp://boom' tabindex="1">Click me</a>

a）分别在css属性rotateX(89deg)，rotateX(-89deg)处渲染元素，这些元素应render element screen保留至少一些＆＃34;效果＆＃34;这样的ndeg＆＃34; rotateX（）＆＃34;，偏移1deg。 jsfiddle http://jsfiddle.net/guest271314/bzdak/

.test{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX( 89deg ); height : 50px; opacity : 1.0; } .test > a{ -webkit-transform: rotateX( -89deg ); } .test:hover, .test a:hover { -webkit-transform : rotateX(0deg); outline : thin solid blue; opacity : 1.0; cursor : pointer; } .test a:link, .test a:active { color : #c17d11; font-size : 24px; }

b）分别在css属性rotateX(89deg)，rotateX(-89deg)处渲染元素，包括设置为css的{{1}}属性opacity值，其中应该呈现0.9 虚拟＆＃34;隐身＆＃34;，类似于element呈现（请参阅http://jsfiddle.net/guest271314/N6MdE/），添加rotateX(90deg) css和/或:hover :active pseudo，或其中之一，或者两者都是＆＃34;通知＆＃34;在elements jsfiddle http://jsfiddle.net/guest271314/De7P6/ <{p}} a的{{1}} element（＆＃34;链接＆＃34;）存在
position

Answer 2

如果一个DOM元素有一个连接到它的事件，例如一个click元素，你将它旋转90度，那么该元素仍然在那个位置，但由于它是平的，你不能点击它。 DOM元素的深度为零，因此当您将DOM元素旋转90度时，您无法看到它。如果你将相同的元素旋转回来，你会看到它并且点击事件有效。从技术上讲，点击区域在元素旋转90度时起作用，它只有一个零点区域被点击。

对于那些不相信该事件仍然存在的人来说，测试一下并亲眼看看。无论您进行多少转换，事件都将与元素保持连接。它也适用于铬。这也适用于链接。删除事件的唯一时间是删除事件或删除元素。转换永远不会删除事件或元素。

<html>
<head>
</head>
<body>
<button id='testButton'>test button</button>
<div id='test'>
    <div><a href='http://www.google.com'>Click me</a></div>
</div>
<button id='flipButton'>transform button</button>
<script>

    document.getElementById("testButton").addEventListener("click",function(){
        alert("It works");
    });
    document.getElementById("flipButton").addEventListener("click",function(){
        if(document.getElementById("testButton").style.webkitTransform == "rotateX(0deg)"){
            document.getElementById("testButton").style.webkitTransform = "rotateX(90deg)";
            document.getElementById("test").style.webkitTransform = "rotateX(90deg)";
        }else{
            document.getElementById("testButton").style.webkitTransform = "rotateX(0deg)";
            document.getElementById("test").style.webkitTransform = "rotateX(0deg)";
        }
    });
</script>
</body>
</html>

以下是使用您的示例的示例：

<html>
<head>
<style>
.test{
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX( 90deg );
}

.test > *{
    -webkit-transform: rotateX( -90deg );
}
</style>
</head>
<body>
<div id='test'>
    <div><a href='http://www.google.com'>Click me</a></div>
</div>
</body>
</html>

您会注意到它仍然有效。您的代码无效的原因是您的href有href='htpp://boom'。 URI htpp://boom不是真实地址。

没有htpp://和boom不是地址。您的代码中的错误与转换无关，与css无关。你的错误没有使用真正的URI。

使用CSS 3D变换单击区域中断

2 个答案: