CSS 3d transform-style preserve-3d Internet Explorer 11 解决方法

Question

您好，我有以下 css/html 代码，其结果如下所示：

            .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);}

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

以上代码派生自下面的 css/html 代码，结果显示如下：

.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 ); }

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

我的问题是如何在不使用 transform-style: preserve-3d 的情况下修改顶部 css/html 代码以产生类似于底部代码的显示，原因是因为 preserve-3d 与 Internet Explorer 11 不兼容。

如有任何帮助，我们将不胜感激。

原始代码取自本页教程： 3d Carousel tutorial

Answer 1

所以这个问题的答案是，由于 internet explorer 11 中不存在 preserve-3d，所以我将视角属性从父容器 (container) 向下移动到 carousel 本身。

查看代码片段：

.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;}
#carousel
{
    width: 100%;
    height: 100%;
    position: absolute;
    perspective: 1000px;
}
#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 ); }

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

CSS 3d transform-style preserve-3d Internet Explorer 11 解决方法

CSS 3d transform-style preserve-3d Internet Explorer 11 Workaround

html

css

3d

transformation