I am using d3.js to draw SVG with the transform:rotate(180deg) property. It displays perfectly on Chrome, but doesn't work on IE11. I tried changing it to rotateY(180deg), and it works with div elements but not with text elements. Here is my screen and code:
IE/Chrome:
<g class="node" transform="translate(1356, 161.11111450195312)">
<circle class="node" r="25" style="fill: rgb(12, 230, 103);" cursor="pointer"></circle>
<text x="-246" y="0" dy=".35em" text-anchor="start" class="area-name">Area 4</text>
<text x="-70" y="50" dy=".35em" text-anchor="start">30 Jan 2019 10:33 PM</text>
<text x="-70" y="70" dy=".35em" text-anchor="start" cursor="pointer" class="text-decorate">Abc</text>
My CSS:
text{
webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-sand-transform: rotate(180deg);
}