我目前有以下 CSS,它适用于 Google Chrome (Webkit),但不适用于任何其他浏览器。
使其与一切兼容的最佳方法是什么?
正如你所看到的,它使用的是 webkit,但我不确定 moz 的等价物是什么。
非常感谢
.card{
margin-top: -50px;
}
.card {
width: 286px; height: 224px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.container:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.megatron {
float: left; top: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.megatron .front {
}
.megatron .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.megatron .back h2 {
background: url(megatron-title.png); text-indent: -9999px;
}
.megatron img {
float: right;
}
您的基本跨浏览器 CSS3 转换声明:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
这是我最喜欢的工具之一,可以帮助加快这一过程:http://css3generator.com/ http://css3generator.com/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)