3D Transforms not respected correctly

[jogibear9988]

use following html:

      <div style="position:absolute;left:107px;top:191px;width:220px;height:134px;">
          <button style="width:80px;height:30px;position:absolute;left:58px;top:50px;">Button</button>
      </div>

and css:

    button {
        
        transform: translateZ(50px);
    }
    div {
        perspective: 180px;
        transform-style: preserve-3d;
    }

[jogibear9988]

https://css-tricks.com/how-css-perspective-works/

[jogibear9988]

https://stackoverflow.com/questions/35654828/javascript-matrix-operations-for-css-transform-perspective