How to make a div flip consistently across browsers?
我正在尝试使用css和jquery在水平面上进行DIV翻转。我在jsFiddle上发现了一些代码,它们非常巧妙地完成了这项工作,但我不明白为什么它不适用于Firefox,而是适用于Chrome和Safari(目前我只在OSX上测试过)。
http://jsfiddle.net/tlcqu/2/
CSS如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 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; } |
我在
对于Mozilla,您需要使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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/
希望这有帮助!
它不适用于火狐,因为
请访问caniuse.com,获取您正在使用的功能的浏览器支持列表。很多CSS3d转换仍然是很有实验性的。