Question

我遇到了关于变换3D的渲染问题。

在 chrome（PC / Mac）上，它如下所示。

但是在移动，safari或chrome 上，我得到了以下内容。

当我仅使用变换2D时，这不会发生在移动设备上。

代码在这里。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no, minimum-scale=0.5, maximum-scale=0.5">
    <meta name="format-detection" content="telephone=no">
    <title>MIXER</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0 auto;
        max-width: 750px;
        position: relative;
        font: 32px/40px sans-serif;
        text-align: center;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        transition: background .5s;
    }

    * {
        box-sizing: border-box;
    }

    *::-webkit-scrollbar {
        display: none;
    }

    #canvas {
        background: #FFF;
        padding: 10%;
        position: relative;
        margin-bottom: 20px;
    }

    #canvas>div {
        position: absolute;
        outline: 1px solid transparent;
        border: 2px solid #FFF;
    }
    </style>

    <body>
        <div id="canvas" style="height: 750px;">
            <div id="0" style="width: 200px; height: 200px; line-height: 200px; top: 125px; left: 75px; background: rgb(236, 69, 69); color: rgb(0, 0, 0); font-size: 85px; font-weight: 300; font-family: fantasy; z-index: 100; transform: perspective(500px) rotateX(-10deg) rotateY(-20deg) rotateZ(5deg) scale3d(1, 1, 1) translate3d(20px, 38px, -3px);">1</div>
            <div id="1" style="width: 200px; height: 200px; line-height: 200px; top: 125px; left: 275px; background: rgb(48, 46, 62); color: rgb(255, 255, 255); font-size: 104px; font-family: monospace; z-index: 500; transform: perspective(500px) rotateX(-8deg) rotateY(19deg) rotateZ(-9deg) scale3d(1, 1, 1) translate3d(-20px, 4px, 2px);">2</div>
        </div>
    </body>

</html>

我已尝试调整 z-index ，但无法正常工作并尝试调整 translateZ ，但由于透视，卡片看起来太大或太小。

我所做的结果是许多卡片中的分割字母，就像这样。它是随机的，很多，所以调整 translateZ 可能不是一个好方法。

PS：我发现一个有趣的事情是，在移动游猎中，表面看起来交叉，但是如果你按下右下方的按钮，它将开始动画，在那个短的有生命的时刻，表面不会交叉。

我想也许在PC上，浏览器逐个绘制div，但在移动设备上，它看起来所有的3D元素都在一层并渲染一次？但如何在野生动物园动画中解释上述情况？

保存我糟糕的移动视图。

Answer 1

您应该在CSS中使用前缀，以便通过浏览器（如下面的模板）轻松理解转换

  -webkit-transform: translate(-100%, 0);
 -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
   -o-transform: translate(-100%, 0);
      transform: translate(-100%, 0);


 -webkit-transition: -webkit-transform 1s ease-in;
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;

然后，您必须根据您的情况调整此示例。

CSS转换3D在PC和PC上看起来不同移动（表面交叉）

1 个答案: