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

我遇到了有关变换3D的渲染问题。CSS变换3D在PC和移动设备上看起来不同（表面交叉）

在铬（PC/Mac），它看起来像下面。

但在移动，Safari或铬，我下面。

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

code here。

<!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：我发现一个感兴趣的事情是，在移动Safari浏览器中，表面看起来越过了，但是如果你按下右下角的按钮，它将开始一个动画，在那短暂的动画时刻，曲面不会被交叉。

我想也许在PC上，浏览器一个接一个地绘制div，但是在移动设备上，它看起来所有的3D元素都在一个图层中并呈现一次？但如何解释safari动画中的上述情况？

保存我可怜的移动视图。

来源

2017-10-16 Erimus Koo

您应该使用前缀在你的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;

你有那么适应这个样本您的情况。

来源

2017-10-16 10:33:32

我已经使用它作为“-webkit-transform”，但错误仍然存在。在我的原始代码中，它是随机产品div，我使用了“-webkit-transform”。所以我复制一个结果html的代码，这个简单并且包含错误情况来解释。 –

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

回答

相关问题