个人中心
gpt4 book ai didi

javascript - 在 Chrome 中裁剪 3D CSS 元素或在 Firefox 中根本没有 3D

转载 作者：太空宇宙 更新时间：2023-11-03 22:27:59 24 4
gpt4 key购买 nike

在我的纸牌游戏元素中，如果添加以下 CSS， map 中的 CSS 元素(卡片)将在 Chrome 中被裁剪:

.state { transform-style: preserve-3d; }

但是如果没有这个 CSS，菜单中的 3D 视差在 Firefox 中根本不起作用。

由于问题不容易重现，我将对代码、相关 CSS 和 HTML 结构提供最少的解释。

完整代码可以在 Github 上找到 https://github.com/rafaelcastrocouto/foda整个事情都在这里在线https://foda-app.herokuapp.com/

我知道这是浏览器中不同实现的结果，我不是在寻找深入的解释，而只是想找到一种使其在 Firefox 和 Chrome 中工作的方法。

/* on 'body' mousemove change '.states' perspective-origin */
/* on '.card.skill' mousemove toggle '.map .card' className 'highlight' */
body, html {
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 485px;
  min-height: 300px;
}

body {
  background-attachment: fixed;
  background-color: #22272c;
  background: radial-gradient(ellipse farthest-corner at center top,#6e7a66 0,#343b43 30%,#22272c 60%,#22272c 100%),#22272c;
  background-size: 100% 20%;
  background-repeat: no-repeat;
  box-shadow: 0 -50px 100px rgba(0,0,0,.7) inset;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  backface-visibility: hidden;
}
.container, .states {
  background-size: cover;
  overflow: hidden;
}
.container {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  color: #fff;
  background-position: 50%;
  background-color: #859890;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: optimizeSpeed;
  will-change: transform;
}
.container, .container:after, .state, .states {
  width: 970px;
  height: 600px;
  position: absolute;
}
.container:after {
  content: "";
  display: block;
  pointer-events: none;
  top: -2px;
  left: -2px;
  border: 2px solid #000;
}
.states {
  animation: persp 20s infinite;
}

.state, .states {
  top: 0;
  left: 0;
}
.states {
  transform: translate3d(0,0,1px);
  perspective: 600px;
  transform-style: preserve-3d;
  image-rendering: auto;
  perspective-origin: 50% 50%;
  will-change: perspective-origin;
}
.table .camera {
  position: absolute;
  top: 45px;
  left: 0;
  width: 718px;
  height: 450px;
  perspective: 800px;
  perspective-origin: 57% 50%;
  overflow: hidden;
  transform: translateZ(0);
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.5);
}
.table .map {
  z-index: 0;
  transform: translate(-49.7%,-50.6%) rotateX(32deg) scale3d(.21,.21,.21);
  transform-style: preserve-3d;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 2s;
}
.map .spot {
  width: 200px;
  height: 300px;
  position: relative;
  border: 6px solid rgba(0,0,0,.1);
  border-radius: 6px;
  display: inline-block;
  transform: translate3d(0,0,1px);
  transform-style: preserve-3d;
  transition: all .3s,filter 2s,-webkit-filter 2s;
}
.map .row {
  height: 312px;
}
.states .table .map .card {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,2px);
  transform-style: preserve-3d;
}
.card.trees, .card.trees .portrait {
  background-color: #5ba22f;
}
.card {
  position: relative;
  display: inline-block;
  text-align: left;
  transition: all .3s;
  padding: 0;
  width: 200px;
  height: 300px;
  border-radius: 8px;
  z-index: 1;
  color: #4d4843;
  cursor: pointer;
  transform: translateZ(0);
  transform-style: preserve-3d;
  background: #898;
  will-change: transform;
}
.menu .background {
  transform: translateZ(-150px) scale(1.3);
  background-size: 970px 405px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.menu.paralax {
  height: 600px;
  width: 970px;
  background-size: 100%;
  background-position: 50% 50%;
  position: absolute;
}
.menu .front {
  transform: scale(.25) translate3d(-1070px,720px,140px);
}
<html>
  <body>
    <div class="container">
      <div class="states">
        <div class="state menu">
          <div class="parallax">
            <div class="background"></div>
            <div class="ground">
              <div class="icon single"></div>
              <div class="icon online"></div>
            </div>
            <div class="front"></div>
          </div>
        </div>
        <div class="state table">
          <div class="decks player">
            <div class="hand">
              <div class="card skill"></div>
              <div class="card skill"></div>
            </div>
          </div>
          <div class="camera">
            <div class="map">
              <div class="row">
                <div class="spot">
                  <div class="card hero"></div>
                </div>
                <div class="spot">
                  <div class="card trees"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

最佳答案

我能够通过为每个视差场景创建具有自己的 perspective 的单独容器来解决此问题，而不是将它们全部置于具有单个控件的 states div 下。

所以基本上不是:

 /* on 'body' mousemove change '.states' perspective-origin */

现在我在做:

 /* on 'body' mousemove change '.current.state .parallax' perspective-origin */

它适用于 Chrome 和 Firefox，无需裁剪。当然， .state { transform-style: preserve-3d; 根本不需要。

关于javascript - 在 Chrome 中裁剪 3D CSS 元素或在 Firefox 中根本没有 3D，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50217883/

24 4 0
文章推荐： javascript - 找出哪个滚动元素有键盘焦点
文章推荐： c# - 同时通过 ref 和 typecast
文章推荐： angularjs - 了解 Nodejs 和 Angular 中的密码重置
文章推荐： c# - 如何以编程方式将 Tab 添加到 TabControl 中，其中停靠了 ListView 控件？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com