SVG异物-RotateX和RotateY在chrome上提供了调整大小的问题

Question

我已经在svg外对象中定义了一个div并应用了转换。在firefox中没有问题，可以根据浏览器窗口调整元素的大小。 在chrome和Opera上，如果我应用了rotateX或rotateY，则div不会根据浏览器窗口大小调整大小。调整浏览器窗口大小时div保持不变。我想在Chrome和Opera上正确调整div的大小。

    .trnsclass{
        transform:translateX(100px) rotateX(30deg);
        -webkit-transform: translateX(100px) rotateX(30deg); 
    }

<svg id="svg3847" viewBox="0 0 1600 700" width="100%">
  	<foreignObject x="0" y="0" width="800" height="700" id="pic">
    <div class="trnsclass" style="position: absolute;background-color:grey;width:200px;height:200px;" >
	  </div>
  	</foreignObject>
</svg>

codepen example