时间戳

首页 > 解决方案 > 为什么 Chrome 会忽略 3D 立方体的一个面上的链接？

html - 为什么 Chrome 会忽略 3D 立方体的一个面上的链接？

问题描述

我制作了一个 3D 立方体，绝对放置 6 个面，然后旋转它们。

我<a href="test.html">0. Front Link</a>为每张脸添加了一个链接。

我添加了 6 个按钮，用于将立方体旋转到每个相同的位置。

预期行为：当立方体旋转时，单击显示的脸上的链接应该带我到test.html.

实际行为： - 在 Firefox 66 中，它按预期工作。- 在 Chromium 73 中，六个链接中有五个按预期工作，但“背面”( <a href="test.html">5. Back Link</a>) 上的链接不起作用。该链接在 HTML 中，如果我在开发工具中单击它，它会正常运行。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="3d Cube, 2019 version">
    <meta name="author" content="John Lynch">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="style.css">
    <title>
      3d Cube
    </title>
</head>

<body>

  <section class="container">
      <div id="cube">
        <div class="face" id="front">
          <a href="test.html">0. Front Link</a>
        </div>
        <div class="face" id="left">
          <a href="test.html">1. Left Link</a>
        </div>
        <div class="face" id="right">
          <a href="test.html">2. Right Link</a>
        </div>
        <div class="face" id="bottom">
          <a href="test.html">3. Bottom Link</a>
        </div>
        <div class="face" id="top">
          <a href="test.html">4. Top Link</a>          
        </div>
        <div class="face" id="back">
          <a href="test.html">5. Back Link</a>
        </div>
      </div>
    </section>

    <section class="row">
      <button class="btn-floating btn-large" id="btn-face0" onclick="rot(0)"><i class="material-icons">filter_none</i></button>
      <button class="btn-floating btn-large" id="btn-face1" onclick="rot(1)"><i class="material-icons">filter_1</i></button>
      <button class="btn-floating btn-large" id="btn-face2" onclick="rot(2)"><i class="material-icons">filter_2</i></button>
      <button class="btn-floating btn-large" id="btn-face3" onclick="rot(3)"><i class="material-icons">filter_3</i></button>
      <button class="btn-floating btn-large" id="btn-face4" onclick="rot(4)"><i class="material-icons">filter_4</i></button>
      <button class="btn-floating btn-large" id="btn-face5" onclick="rot(5)"><i class="material-icons">filter_5</i></button>
    </section>

  <script>
    function rot(face) {
      document.getElementById('cube').classList = `rotate${face}`;
    }
  </script>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript" src="scripts/index.js"></script>

</body>

</html>

/*
Display content on the faces of a rotating cube
*/

* {
  box-sizing: border-box;
  text-decoration: none;
}

html, body {
  height:100%;
  width: 100%;
  padding: 1.4vmax;
  overflow: hidden;
  background-color: black;
  --cube-dim: 40vmax;
  --half-cube-dim: calc(var(--cube-dim)*0.5);
  --minus-half-cube-dim: calc(var(--cube-dim)*-0.5);
}

#cube {
  transform-style: preserve-3d;
  /*perspective: 16000px;
  perspective-origin: center center;*/
  backface-visibility: hidden;
  position: absolute;
  top: calc(50% - var(--half-cube-dim));
  left: calc(50% - var(--half-cube-dim));
  transform-origin: center center;
  font-size: 8vmin;
}

.face {
  position: absolute;
  width: var(--cube-dim);
  height: var(--cube-dim);
  border-radius: 3%;
  background-color: black;
  opacity: 1.0;
  box-shadow: 0 0 0 2px;
  border: 4px solid gold;
  /*margin: var(--half-cube-dim);*/
}

button {
    position: absolute;
    width: 10vw;
    height: 5vh;
    font-size: 2vw;
    color: #ffbb00;
    background-color: #2020ff;
    border-radius: 5px;
}
.rotate0 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(0) rotateX(0deg) rotateY(0deg);
}

.rotate1 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--half-cube-dim)) rotateY(90deg);
}

.rotate2 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--half-cube-dim)) rotateY(-90deg);
}

.rotate3 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(var(--half-cube-dim)) rotateX(90deg);
}

.rotate4 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateX(0) translateY(var(--half-cube-dim)) rotateX(-90deg);
}

.rotate5 {
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0) translateX(var(--cube-dim)) rotateY(180deg);
}

/*=================================================*/

#front {
  transform: rotate3d(0, 1, 0, 0deg) translateZ(var(--half-cube-dim));
}

#right {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(var(--half-cube-dim));
}

#back {
  transform: rotate3d(0, 1, 0, 180deg) translateZ(var(--half-cube-dim));
}

#left {
  transform: rotate3d(0, 1, 0, -90deg) translateZ(var(--half-cube-dim));
}

#top {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(var(--half-cube-dim));
}

#bottom {
  transform: rotate3d(1, 0, 0, -90deg) translateZ(var(--half-cube-dim));
}

.material-icons {
  font-size: 4vmin;
}

.test-container {
  background: #331144;
  color: #ffaa00;
  position: absolute;
  width: 100%;
  height: 100%;
  /*top: 50%;
  left: 50%;*/
}

.test-container h1 {
  font-size: 4vw;
  top: 40%;
  left: 40%;
  position: absolute;
}

我已经搜索了有关在 3D 中不起作用的链接的答案，但什么也找不到。我检查了开发工具和编辑器中的代码，但找不到任何可以将此链接与其表亲区分开来的内容。

我很困惑。

标签： htmlcsshyperlink3d

解决方案

我对 3D CSS 不太熟悉，但我通过实验发现罪魁祸首是backface-visibility: hidden;“立方体”div 上的属性。

当一个 div 进行背面剔除并且您将其 3d 旋转远离视图（即相机/用户/其他任何东西）时，它就会被剔除（当然）。这意味着 A) 它不会在视觉上呈现并且 B) 它不会与鼠标交互。现在，当您旋转该剔除 div 的子元素以使其实际面向视图时，即使父元素被剔除，该子 div 也应该被渲染并与鼠标正常交互。不幸的是，Chromium 73要么存在错误，要么解释方式不同，因此旋转以面对视图的背面剔除元素的子元素按预期呈现，但不与鼠标交互。

下面是我的意思的简化示例。如果你在Chromium 73中运行它，那么你可以看到两个按钮，但第一个按钮不能用鼠标操作：

<!doctype html>
<html>
    <head>
        <style>
            .parent {
                background-color: red;
                transform: rotateY(180deg);
            }
            .child {
                background-color: blue;
                transform: rotateY(180deg);
            }
            .culled {
                backface-visibility: hidden;
            }
            .space { padding: 1em; }
        </style>
    </head>
    <body>
        <div class='parent culled'>
            <button class='child'>hi</button>
        </div>
        <div class='space'></div>
        <div class='parent'>
            <button class='child'>hi</button>
        </div>
    </body>
</html>

推荐阅读