I don't know why matrix3d doesn't work on ios. I open this code on android it works fine, but when I open this on ios, matrix3d doesn't work as expected.

      <div class="inline-flex">
        <div
          class="styled__HotspotMediaWrapper-Panoee__sc-1kvgft6-4 chHaRe"
          style={{
            width: "1544px",
            height: "868.5px",
            transform: "matrix3d(0.211397,-0.0755495,0,-0.000494837,0.0634816,0.411308,0,-0.000168805,0,0,1,0,262.386,95.416,0,1)",
            backgroundColor: "#00000000",
            opacity: 1,
            position: "absolute",
            top: 0,
            left: 0,
            zIndex: -111,
            transformOrigin: "0 0"
          }}
        >
          <video style={{ width: "100%", height: "100%" }}>
            <source src="https://assets.panoee.com/statics/uploads/user/61bf4b3b75457551f3f6b686/media/asset/xn2kOthC8lOqXf999QUA.mp4"
              type="video/mp4; charset=UTF-8"
            />
          </video>
        </div>
      </div>

I've tested on both chrome and safari, I also used webkit prefix.

My code: https://codesandbox.io/s/elated-euclid-mxdgq?file=/src/App.js