3d怎么保存html格式,html – Internet Explorer保存3D修复
以下代码适用于除IE.10之外的所有浏览器.
MSDN网站说以下(我不明白如何申请)：
注意W3C规范为此属性定义了一个关键字值为preserve-3d,表示未执行平坦化.此时,Internet Explorer 10不支持preserve-3d关键字.除了子元素的正常变换之外,您还可以通过手动将父元素的变换应用于每个子元素来解决此问题.
我的代码(我使用CSS选择器的其他原因)：
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}
你能帮我一下吗
非常感谢！