CSS transform 3D在PC上看起来不同&；移动式（地面交叉）
我遇到了一个有关transform 3D的渲染问题 在chrome（PC/Mac）上，它如下所示。 但在移动、safari或chrome上，我看到了下面的内容。 当我只使用transform 2D时，这不会在移动设备上发生 代码在这里CSS transform 3D在PC上看起来不同&；移动式（地面交叉）,css,3d,transform,Css,3d,Transform,我遇到了一个有关transform 3D的渲染问题 在chrome（PC/Mac）上，它如下所示。 但在移动、safari或chrome上，我看到了下面的内容。 当我只使用transform 2D时，这不会在移动设备上发生 代码在这里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi
<!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>
搅拌机
html，
身体{
身高：100%；
保证金：0自动；
最大宽度：750px；
位置：相对位置；
字体：32px/40px无衬线；
文本对齐：居中；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
过渡：背景。5s；
}
* {
框大小：边框框；
}
*：-webkit滚动条{
显示：无；
}
#帆布{
背景：#FFF；
填充：10%；
位置：相对位置；
边缘底部：20px；
}
#画布>div{
位置：绝对位置；
外形：1px实心透明；
边框：2倍实心#FFF；
}
1.
2.
并尝试调整translateZ，但由于透视图的缘故，卡片看起来会太大或太小 我做的结果是在许多卡片上拆分字母，就像这样。 它是随机的，而且很多，所以调整translateZ可能不是一个好方法 PS：我发现一件有趣的事情是，在mobile 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;