CSS变换3D在PC和移动设备上看起来不同(表面交叉)
问题描述:
我遇到了有关变换3D的渲染问题。CSS变换3D在PC和移动设备上看起来不同(表面交叉)
当我只使用变换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动画中的上述情况?
答
您应该使用前缀在你的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;
你有那么适应这个样本您的情况。
我已经使用它作为“-webkit-transform”,但错误仍然存在。在我的原始代码中,它是随机产品div,我使用了“-webkit-transform”。所以我复制一个结果html的代码,这个简单并且包含错误情况来解释。 –