Question

我正在使用转换：rotateY（180deg）来翻转一些文本，但是在IE上不起作用。我已经在线阅读了3d透视图的信息，但我不太确定这对我意味着什么。

更新此处是页面链接https://www.freedmaninternational.com/new-about-us-test/

-ms-transform: rotateY(180deg);
/* -webkit-transform: rotateY(180deg); */
-moz-transform: rotateY(180deg);

这些似乎没有影响。

这是CSS

.flip-card {
background-color: transparent;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
 transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.flip-card-back {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
 position: absolute;
bottom: 0%;
left: 0%;
right: 0%;
top: -30%;
height: 100%;
}

.flip-card:hover .flip-card-front h3 {
    opacity: 0;
}

我需要它才能在IE和所有浏览器上运行。任何帮助将不胜感激！

谢谢

Answer 1

如今已经很好地支持

transform，如果您仍想对较旧的浏览器使用前缀语法，则应首先编写它们。

不带前缀的规则应该写在最后，不支持该规则的浏览器应该看不到它。

span{
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);/* should be the last, so the browser uses the latest rule it understands */

}

/* center x,y the test in old browser and IE11, else use flex or grid*/
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:5vh
}

<span>ROTATION IN IE ?</span>

转换rotateY（180deg）在IE上不起作用

1 个答案: