CSS 3D isometric simple rotation transform
<p>I am trying to do a small CSS animation with a <code>door</code> like folding animation. I use a SVG as the base, gave it an isometric transform and now I would like the orange square to fold as if it was a 3D space.</p>

<p>I tried to play with perspective, skewing, transform 3D but failed.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#svgbox {
  position: absolute;
  transform: rotate(-45deg) skew(15deg, 15deg);
  left: 200px;
}
#rect5 {
  animation: rect5anim 3s ease forwards;
  transform-origin: 0% 50%;
  perspective: 1500px;
  /*transform-style: preserve-3d;*/
}
@keyframes rect5anim {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="svgbox"&gt;
  &lt;svg viewBox="0 0 1200 1200" width="400" height="400" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;defs&gt;
      &lt;linearGradient x1="123.587715%" y1="49.9380835%" x2="24.1186732%" y2="49.9380835%" id="linearGradient-1" gradientTransform="rotate(45)"&gt;
        &lt;stop stop-color="#F6851F" offset="0%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#F59427" offset="28.32%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#F5BB42" offset="100%"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient x1="126.190394%" y1="50.060688%" x2="22.2418719%" y2="50.060688%" id="linearGradient-2" gradientTransform="rotate(45)"&gt;
        &lt;stop stop-color="#F6851F" offset="0%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#F5BB42" offset="100%"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient x1="122.778325%" y1="50.0081081%" x2="24.5036946%" y2="50.0081081%" id="linearGradient-3" gradientTransform="rotate(45)"&gt;
        &lt;stop stop-color="#8CC151" offset="0%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#98C54C" offset="14.59%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#D7DF23" offset="99%"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient x1="-27.65086%" y1="50.0081081%" x2="72.4520885%" y2="50.0081081%" id="linearGradient-4" gradientTransform="rotate(45)"&gt;
        &lt;stop stop-color="#8CC151" offset="0%"&gt;&lt;/stop&gt;
        &lt;stop stop-color="#D7DF23" offset="99%"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;g&gt;
      &lt;rect id="rect1" width="200" height="200" fill="url(#linearGradient-1)" /&gt;
      &lt;rect id="rect2" x="201" width="200" height="200" fill="url(#linearGradient-1)" /&gt;
      &lt;rect id="rect3" x="401" width="200" height="200" fill="url(#linearGradient-2)" /&gt;
      &lt;rect id="rect4" x="601" width="200" height="200" fill="url(#linearGradient-2)" /&gt;
      &lt;rect id="rect5" x="801" width="200" height="200" fill="url(#linearGradient-2)" /&gt;

      &lt;rect id="rect6" y="201" width="200" height="200" fill="url(#linearGradient-3)" /&gt;
      &lt;rect id="rect7" y="401" width="200" height="200" fill="url(#linearGradient-4)" /&gt;
      &lt;rect id="rect8" y="601" width="200" height="200" fill="url(#linearGradient-4)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>