Я определил div в svg foreignobject и применил преобразования. В Firefox проблем нет, размер элемента изменяется в соответствии с окном браузера.
В Chrome и Opera, если я применил rotateX или rotateY, div не изменяет размер в соответствии с размером окна браузера. div остается неизменным при изменении размера окна браузера. Я хотел правильно изменить размер div в Chrome и Opera.
.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>
пример кода