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

时间：2016-03-23 15:07:15

标签： css html5 css3 3d transformation

您好我有以下css / html代码导致显示如下： enter image description here 

            .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代码，导致显示如下：

enter image description here 

.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>

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

非常感谢任何帮助。

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

1 个答案:

答案 0 :(得分：0)

所以这个问题的答案是，因为在Internet Explorer 11中不存在preserve-3d，所以我将透视属性从父容器（容器）向下移动到轮播本身。

参见代码剪辑：

.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>

相关问题
最新问题