CSS 3D isometric simple rotation transform - css

Question

I am trying to do a small CSS animation with a door 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.
I tried to play with perspective, skewing, transform 3D but failed.
#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);
}
}
<div id="svgbox">
<svg viewBox="0 0 1200 1200" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="123.587715%" y1="49.9380835%" x2="24.1186732%" y2="49.9380835%" id="linearGradient-1" gradientTransform="rotate(45)">
<stop stop-color="#F6851F" offset="0%"></stop>
<stop stop-color="#F59427" offset="28.32%"></stop>
<stop stop-color="#F5BB42" offset="100%"></stop>
</linearGradient>
<linearGradient x1="126.190394%" y1="50.060688%" x2="22.2418719%" y2="50.060688%" id="linearGradient-2" gradientTransform="rotate(45)">
<stop stop-color="#F6851F" offset="0%"></stop>
<stop stop-color="#F5BB42" offset="100%"></stop>
</linearGradient>
<linearGradient x1="122.778325%" y1="50.0081081%" x2="24.5036946%" y2="50.0081081%" id="linearGradient-3" gradientTransform="rotate(45)">
<stop stop-color="#8CC151" offset="0%"></stop>
<stop stop-color="#98C54C" offset="14.59%"></stop>
<stop stop-color="#D7DF23" offset="99%"></stop>
</linearGradient>
<linearGradient x1="-27.65086%" y1="50.0081081%" x2="72.4520885%" y2="50.0081081%" id="linearGradient-4" gradientTransform="rotate(45)">
<stop stop-color="#8CC151" offset="0%"></stop>
<stop stop-color="#D7DF23" offset="99%"></stop>
</linearGradient>
</defs>
<g>
<rect id="rect1" width="200" height="200" fill="url(#linearGradient-1)" />
<rect id="rect2" x="201" width="200" height="200" fill="url(#linearGradient-1)" />
<rect id="rect3" x="401" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect4" x="601" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect5" x="801" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect6" y="201" width="200" height="200" fill="url(#linearGradient-3)" />
<rect id="rect7" y="401" width="200" height="200" fill="url(#linearGradient-4)" />
<rect id="rect8" y="601" width="200" height="200" fill="url(#linearGradient-4)" />
</g>
</svg>
</div>

Answer 1

The problem is because you are using the perspective property and not applying perspective to the transform (transform: perspective(x)). The perspective property does not affect the rendering of an element. It only creates a 3D space that will be used by its children. You can find more information about this in this CSS Tricks Article.
Another thing that might be worth noting is that percentage values for transform-origin don't seem to work well in Firefox. It requires px based values and that too it should be in reference to the SVG's (0,0). So, for #rect5, setting transform-origin: 801px 100px produces the expected output in FF. This CSS Tricks Article has detailed information about this particular problem.
Below is a snippet which uses transform with a perspective in-order to produce the needed effect.
#svgbox {
position: absolute;
transform: rotate(-45deg) skew(15deg, 15deg);
left: 200px;
}
#rect5 {
animation: rect5anim 3s ease forwards;
transform-origin: 801px 100px;
transform-style: preserve-3d;
}
#keyframes rect5anim {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(180deg);
}
}
<div id="svgbox">
<svg viewBox="0 0 1200 1200" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="123.587715%" y1="49.9380835%" x2="24.1186732%" y2="49.9380835%" id="linearGradient-1" gradientTransform="rotate(45)">
<stop stop-color="#F6851F" offset="0%"></stop>
<stop stop-color="#F59427" offset="28.32%"></stop>
<stop stop-color="#F5BB42" offset="100%"></stop>
</linearGradient>
<linearGradient x1="126.190394%" y1="50.060688%" x2="22.2418719%" y2="50.060688%" id="linearGradient-2" gradientTransform="rotate(45)">
<stop stop-color="#F6851F" offset="0%"></stop>
<stop stop-color="#F5BB42" offset="100%"></stop>
</linearGradient>
<linearGradient x1="122.778325%" y1="50.0081081%" x2="24.5036946%" y2="50.0081081%" id="linearGradient-3" gradientTransform="rotate(45)">
<stop stop-color="#8CC151" offset="0%"></stop>
<stop stop-color="#98C54C" offset="14.59%"></stop>
<stop stop-color="#D7DF23" offset="99%"></stop>
</linearGradient>
<linearGradient x1="-27.65086%" y1="50.0081081%" x2="72.4520885%" y2="50.0081081%" id="linearGradient-4" gradientTransform="rotate(45)">
<stop stop-color="#8CC151" offset="0%"></stop>
<stop stop-color="#D7DF23" offset="99%"></stop>
</linearGradient>
</defs>
<g>
<rect id="rect1" width="200" height="200" fill="url(#linearGradient-1)" />
<rect id="rect2" x="201" width="200" height="200" fill="url(#linearGradient-1)" />
<rect id="rect3" x="401" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect4" x="601" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect5" x="801" width="200" height="200" fill="url(#linearGradient-2)" />
<rect id="rect6" y="201" width="200" height="200" fill="url(#linearGradient-3)" />
<rect id="rect7" y="401" width="200" height="200" fill="url(#linearGradient-4)" />
<rect id="rect8" y="601" width="200" height="200" fill="url(#linearGradient-4)" />
</g>
</svg>
</div>