CSS 3D transformations in SVG

PoC implementation in WebKit by

Nikolas Zimmermann
nzimmermann@igalia.com

• Enclose the <path> elements in a container

SVG<svg xmlns="http://www.w3.org/2000/svg" width="1800px" height="1800px">
    <g class="box">
         <path id="path482" fill="none" d="M184.013,144.428"/>
    ...
    </g>
</svg>

• Add z-translation in 3D space to each <path>

JavaScript[...document.getElementsByTagName("path")].forEach(
    (path, index) => { path.style.transform = "translateZ(" + (index + 1) + "px)";
});

• Animate perspective using CSS 3D transforms

CSS.box {
    transform-style: preserve-3d;
    perspective: 10000px;
    animation-name: example;
    animation-duration: 10s;
}

@keyframes example {
    0% { perspective: 10000px; }
   50% { perspective:   100px; transform: rotate3d(0, 0, 1, 10deg); }
  100% { perspective: 10000px; }
}

"transform-style: preserve-3d" is necessary to ensure that all path elements enclosed in the container share the same perspective

Welcome to the future :-)