你好,我有以下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>
我的问题是,如何修改顶级css/html代码,在不使用transform样式的情况下,产生类似底部代码的显示:保存-3d,原因是因为保存-3d与internet 11不兼容。
任何帮助都将不胜感激。
原始代码摘自本页上的教程:3d旋转木马教程
发布于 2016-03-23 16:42:08
因此,这个问题的答案是,由于internet 11中不存在保存-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>
https://stackoverflow.com/questions/36181794
复制相似问题