[英]How to make a div flip consistently across browsers?
我正在尝试使用CSS和JQuery在水平面上进行div翻转。 我在JSFiddle上找到了一些可以很好地完成此操作的代码,但是我不明白为什么它不能在Firefox上运行,而在Chrome和Safari上运行(我目前仅在OSX上对其进行过测试)。
CSS如下:
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
我加了-moz-transform: rotateY(-180deg);
在-webkit-transform:
任何地方。 这具有使文本反转(而不是div)的奇怪效果。 我不确定在webkit中什么有效,或者我应该更改什么。
对于mozilla,您需要使用-moz-
。 这是CSS的更新版本:
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
-moz-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
演示: http : //jsfiddle.net/TLCqu/3/
希望这可以帮助!
它在Firefox上不起作用,因为-webkit
仅适用于webkit浏览器。 Firefox使用gecko,您需要添加-mozilla前缀以支持mozilla。
请访问caniuse.com ,以获取浏览器对所使用功能的支持列表。 许多CSS 3d转换仍处于实验阶段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.