我做了一个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中工作的链接的答案,但什么都找不到。我已经检查了Dev Tools和我的编辑器中的代码,但是找不到任何可以区分此链接与其表兄弟的内容。
我很困惑。
我对3D CSS并不熟悉,但我通过实验发现,罪魁祸首是“立方体”div上的backface-visibility: hidden;
属性。
当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>