首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS 3d转换-风格保护-3D Internet 11解决方案

CSS 3d转换-风格保护-3D Internet 11解决方案
EN

Stack Overflow用户
提问于 2016-03-23 15:07:15
回答 1查看 1K关注 0票数 1

你好,我有以下css/html代码,结果显示如下:

代码语言:javascript
运行
复制
            .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);}
代码语言:javascript
运行
复制
<!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代码派生出来的,其结果是显示如下所示:

代码语言:javascript
运行
复制
.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 ); }
代码语言:javascript
运行
复制
<!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旋转木马教程

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-23 16:42:08

因此,这个问题的答案是,由于internet 11中不存在保存-3D,所以我将透视属性从父容器(容器)移到旋转木马本身。

请参阅代码片段:

代码语言:javascript
运行
复制
.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 ); }
代码语言:javascript
运行
复制
<!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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36181794

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档