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

标签 html css hyperlink 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 中不起作用的链接的答案，但一无所获。我检查了开发工具和我的编辑器中的代码，但没有发现任何可以将此链接与其同类链接区分开来的东西。

我很困惑。

最佳答案

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

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

下面是我的意思的一个简化示例。如果您在 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>

关于html - 为什么 Chrome 仅忽略 3D 立方体一个面上的链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55525133/

上一篇：jquery - 有两个奇怪大小的元素是中心和边缘响应想象容器

下一篇：jquery 不能从外部 symfony 包工作

相关文章：

javascript - 为什么不能在 Javascript 中通过 Scores API 发布分数？

javascript - 如何用两个图像保存 Canvas

html - 水平可滚动容器内的 flexbox 宽度

css - Chrome 模拟器不激活媒体查询

html - 在 iOS 中打开应用程序的链接

html - 将链接样式重置为包含 div 中的图像的 <A>

html - 如何使用带有输入复选框的 html+css 制作响应式菜单？

html - flex 元素在包裹时在它们之间创建空间

html - Bootstrap 3.0 文本在刷新时消失

java - 如何在另一个 Activity 中输入两个 Activity 链接？

©2024 IT工具网  联系我们