CSS 3d transform-style preserve-3d Internet Explorer 11 Workaround
<p>Hello I have the following css/html code which results in a display like this:
<a href="https://i.stack.imgur.com/MJBoB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MJBoB.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>            .container{width: 200px;left:300px;top:200px;height: 300px;position: relative;}
            #carousel{width: 100%;height: 100%;position: absolute;perspective:400px;}
            #carousel figure{margin: 0;display: block;position: absolute;width: 200px;height: 200px;left: 10px;top: 10px;border: 1px solid black;}
            #carousel figure:nth-child(1) {transform: rotate3d(0,1,0,0deg);}
            #carousel figure:nth-child(2) {transform: rotate3d(0,1,0,40deg);}
            #carousel figure:nth-child(3) {transform: rotate3d(0,1,0,80deg);}
            #carousel figure:nth-child(4) {transform: rotate3d(0,1,0,120deg);}
            #carousel figure:nth-child(5) {transform: rotate3d(0,1,0,160deg);}
            #carousel figure:nth-child(6) {transform: rotate3d(0,1,0,200deg);}
            #carousel figure:nth-child(7) {transform: rotate3d(0,1,0,240deg);}
            #carousel figure:nth-child(8) {transform: rotate3d(0,1,0,280deg);}
            #carousel figure:nth-child(9) {transform: rotate3d(0,1,0,320deg);}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctyle html&gt;&lt;html&gt;&lt;section class="container"&gt;&lt;div id="carousel"&gt;&lt;figure&gt;1&lt;/figure&gt;&lt;figure&gt;2&lt;/figure&gt;&lt;figure&gt;3&lt;/figure&gt;&lt;figure&gt;4&lt;/figure&gt;&lt;figure&gt;5&lt;/figure&gt;&lt;figure&gt;6&lt;/figure&gt;&lt;figure&gt;7&lt;/figure&gt;&lt;figure&gt;8&lt;/figure&gt;&lt;figure&gt;9&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>The above code was derived from the below css/html code which results in a display like this:</p>

<p><a href="https://i.stack.imgur.com/oL7x0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oL7x0.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;perspective: 1000px;}
#carousel {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d;}
#carousel figure {margin: 0;display: block;position: absolute;width: 186px;height: 116px;left: 10px;top: 10px;border: 2px solid black;}
#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctyle html&gt;&lt;html&gt;&lt;section class="container"&gt;&lt;div id="carousel"&gt;&lt;figure&gt;1&lt;/figure&gt;&lt;figure&gt;2&lt;/figure&gt;&lt;figure&gt;3&lt;/figure&gt;&lt;figure&gt;4&lt;/figure&gt;&lt;figure&gt;5&lt;/figure&gt;&lt;figure&gt;6&lt;/figure&gt;&lt;figure&gt;7&lt;/figure&gt;&lt;figure&gt;8&lt;/figure&gt;&lt;figure&gt;9&lt;/figure&gt;&lt;/div&gt;&lt;/section&gt;&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>My question is how can I modify the top css/html code to result in a display like the bottom code without using <strong>transform-style: preserve-3d</strong>, reason being is because preserve-3d is not compatible with internet explorer 11.</p>

<p>Any help would be greatly appreciated.</p>

<p>The original code was taken from a tutorial on this page:
<a href="https://desandro.github.io/3dtransforms/docs/carousel.html" rel="nofollow noreferrer">3d Carousel tutorial</a></p>