You can apply 3D transforms to <svg> elements that are on an HTML page, like you can for other (HTML) elements.
However 3D transforms on SVG content is not well supported by browsers as yet.
You don’t exactly say what you are trying to achieve. But am I right in guessing that you are actually wanting to enlarge the shape, as if it is coming closer to the camera?
If so, then you can just scale it around its centre.
.hex {
cursor: pointer;
transition: all 0.5s ease-in-out;
transform-box: fill-box;
transform-origin: 50% 50%;
}
.hex:hover {
transform: scale(1.5);
}<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="6,-15 -6,-15 -12,0 -6,15 6,15 12,0" />
</g>
</defs>
<g class="hex">
<use xlink:href="#pod" x="50" y="41" fill="#96ddff"/>
<image xlink:href="https://placeholder.pics/svg/12" x="44" y="35" width="12" height="12"/>
</g>
</svg>CLICK HERE to find out more related problems solutions.