html 立方体切换效果,html – CSS3 – 3D立方体 – IE变换风格：保留-3d解决方法...

在浏览IE10的developer blog后,我发现它们不支持preserve-3d设置.

我发现这个立方体最初是由Paul Hayes制作的,它使用触摸屏而且非常受欢迎.

Altough preserve-3d设置是一个已知的问题,我无法实现建议的工作,因为它似乎在父级中没有转换属性来实际应用于子元素.

这是我到目前为止简化的链接：http://jsfiddle.net/cC4Py/1/

CSS：

.viewport {

perspective: 800px;

perspective-origin: 50% 200px;

transform: scale(0.75,0.75);

-webkit-perspective: 800;

-webkit-perspective-origin: 50% 200px;

-webkit-transform: scale(0.75,0.75);

-moz-perspective: 800;

-moz-perspective-origin: 50% 200px;

-moz-transform: scale(0.75,0.75);

}

.cube {

position: relative;

margin: 0 auto;

height: 400px;

width: 400px;

transition: transform 50ms linear;

transform-style: preserve-3d;

-webkit-transition: -webkit-transform 50ms linear;

-webkit-transform-style: preserve-3d;

-moz-transition: -moz-transform 50ms linear;

-moz-transform-style: preserve-3d;

}

.cube > div {

position: absolute;

height: 360px;

width: 360px;

padding: 20px;

background-color: rgba(50,50,1);

font-size: 1em;

line-height: 1em;

color: #fff;

border: 1px solid #555;

border-radius: 3px;

transition: -webkit-transform 50ms linear;

}

.cube > div:first-child {

transform: rotateX(90deg) translateZ(200px);

-webkit-transform: rotateX(90deg) translateZ(200px);

-moz-transform: rotateX(90deg) translateZ(200px);

}

.cube > div:nth-child(2) {

transform: translateZ(200px);

-webkit-transform: translateZ(200px);

-moz-transform: translateZ(200px);

}

.cube > div:nth-child(3) {

transform: rotateY(90deg) translateZ(200px);

-webkit-transform: rotateY(90deg) translateZ(200px);

-moz-transform: rotateY(90deg) translateZ(200px);

text-align: center;

}

.cube > div:nth-child(4) {

transform: rotateY(180deg) translateZ(200px);

-webkit-transform: rotateY(180deg) translateZ(200px);

-moz-transform: rotateY(180deg) translateZ(200px);

}

.cube > div:nth-child(5) {

transform: rotateY(-90deg) translateZ(200px);

-webkit-transform: rotateY(-90deg) translateZ(200px);

-moz-transform: rotateY(-90deg) translateZ(200px);

}

.cube > div:nth-child(5) p {

text-align: center;

font-size: 2.77em;

margin: 40px;

line-height: 60px;

}

.cube > div:nth-child(6) {

transform: rotateX(-90deg) rotate(180deg) translateZ(200px);

-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);

-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);

}

object {

opacity: 0.9;

}

object:hover {

opacity: 1;

}

HTML：

我创建了没有-webkit-前缀的每个属性的副本.我做错了吗？接下来我该怎么办？