CSS transform 3D looks different on PC & mobile (surface crossed)

Question

I've meet a render problem about transform 3D.

On the chrome(PC/Mac), it looks like below.

But on mobile, safari or chrome, I got below.

When I use only the transform 2D, this won't happen on mobile.

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>

I've tried adjust the z-index, but not work.
And tried adjust the translateZ, but because of the perspective, the cards will look too big or too small.

The result I'm doing is split letters in many cards, like this. It's random and many, so adjust the translateZ maybe not a good way.

PS: I found a interest thing is, in mobile safari, the surface looks crossed, but if you press the bottom right button, it will start an animation, in that short animate moment, the surface is not crossed.

I think maybe on PC, the browser draw the div one by one, but on mobile, it looks all the 3D elements are in one layer and render once? but how to explain the above situation in safari animation?

Save my poor mobile view.

Benoit Gambier Benoit Gambier · Accepted Answer · 2017-10-16T10:33:32

You should use prefixes in your CSS to make the transform understood well by browsers like template below

  -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;

You have then to adapt this sample to your situation.

CSS transform 3D looks different on PC & mobile (surface crossed)

1 Answers