使用 CSS 3D 变换的点击区域中断答案

【问题标题】：Click areas break using CSS 3D transforms使用 CSS 3D 变换的点击区域中断
【发布时间】：2020-10-25 17:53:44
【问题描述】：

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

dom结构为：

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

上面的dom结构也在JSFiddle上

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

【问题讨论】：

在 Windows 上的 Chrome 中，它没有错位；它被缩小到测试 div 的尺寸（即 a 中心的 1px 高度线
我在 OS X 上也一样。1px 高。
这已经很晚了 :) 但是您找到解决方案了吗？我可以在 jsFiddle 中看到 href 链接是 htpp 而不是 http。除此之外，一切似乎都很好。

标签： html css 3d css-transforms

【解决方案1】：

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

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

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)";
  }
});

<html>

<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>
</body>

</html>

这是一个使用您的示例的示例：

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

.test>* {
  -webkit-transform: rotateX( -90deg);
}

<html>

<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。

【讨论】：

这对上一个答案有什么补充？
这是不正确的，至少在 Chrome 上是不正确的。根据原帖，点击区域不会在多次变换下保留。
标记你不正确。请在单击事件上测试一些转换，您将看到该事件将保持与元素的连接。我更新了我的帖子，展示了一个简单的例子，你可以测试一下我是对的。
感谢@PatrickW.McMahon，我已将您的示例添加为fiddle，但这并不能回答我的问题。您的解决方案似乎表明，在稍后阶段重置转换确实可以成功维护点击区域，但是我需要一个答案来维护父/子转换之和 = 0 的点击区域
转换元素或其父元素之一并不重要。点击甚至仍然不会被删除。根据我的回答，我明确指出转换元素不会删除点击事件。因此，基于此声明，转换元素也不会从子元素中删除点击事件。我的示例可能显示了对直接元素的单击，但在另一个元素中简单地敲击一个元素转换父元素，您将看到同样的情况。变换只变换不多不少。

【解决方案2】：

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

而在rotateX(90deg)，元素不会被渲染为“可见”或“可见”。

元素将沿它们的X 轴“展平”，就像它一样。

rotateX(90deg) 的 css 可能是 transform 的元素 - 90 deg (rees) sic。

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

同样，transform 属性可能只是试图实现true 90 deg (ree) sic 角度，沿X 轴可能类似于- 如果可见 -

_

或“地平线”。

| - Y 轴

_ - X 轴

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

编辑（更新、变通方法）

您的回答没有提到可点击区域。另外，你的演示不提供保留单击区域的解决方法。 ——马克·伦丁

如果要求包括将css 属性rotateX() 值设置为90deg，element 可能会呈现类似于display : none;，即在@ 上呈现虚拟“不可见” 987654355@。见http://jsfiddle.net/guest271314/N6MdE/

解决方法

1) 适用于以下两个选项a) 和 b)

html

<!-- add `tabindex` attribute to `.test > a`,
     whether `element` rendered "visible", or "invisible",
     pressing `Tab` `key` possible to select `a` `element`,
     possibly add `title` attribute, 
     both `attributes` added for "notification", 
     of `a` `element` ("link") presence at that `position` in `document`,
     still possible to `navigate` to `a` `link`, utilizing `Tab` `key`
-->
<a href='htpp://boom' tabindex="1">Click me</a>

a) 分别在css 属性rotateX(89deg)、rotateX(-89deg) 处渲染元素，这应该在screen 上render 和elements，也许至少保留一些“效果”，例如@ 987654363@ "rotateX()"，被1deg 偏移。 jsfiddlehttp://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 属性opacity 值设置为0.9，这应该渲染elements 虚拟 /em> “不可见”，类似于rotateX(90deg) 渲染（请参阅http://jsfiddle.net/guest271314/N6MdE/），添加css :hover 和/或:active pseudo elements，其中一个或两个，用于“通知” a element（“链接”）出现在 position 在 document jsfiddle http://jsfiddle.net/guest271314/De7P6/

    .test{
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX( 89deg );
    display : block;
    height : 50px;
    opacity : 0.9;
}

.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;
}

【讨论】：

你的回答没有提到可点击区域。此外，您的演示没有提供保留点击区域的解决方法。
@MarkLundin 注意最初试图传达原始作品基本呈现rotate(90deg) 元素“不可见”，或者甚至可能低于1px，但不确定这是否完全可能。对click 或clickable 区域的尺寸有什么要求？