css3动画之两面翻转的盒子

html-css010

css3动画之两面翻转的盒子,第1张

近期学习c3，了解到两面翻转的盒子的两种制作方式：

一个盒子里面装两个同宽高的盒子，利用backface-visibility设置元素背面是否可见的属性，达到两面翻转的效果

对你的问题倒是没有答案，只是看到你问题，想插句嘴。你注意-webkit前缀，你要用这种方式实现了，你不用webkit内核的浏览器完全没法看。你应该写：

transform:rotate(180deg)

-ms-transform:rotate(180deg)/* IE 9 */

-moz-transform:rotate(180deg)/* Firefox */

-webkit-transform:rotate(180deg)/* Safari and Chrome */

-o-transform:rotate(180deg)/* Opera */

目前情况下，正确的方式在目前是通过js配合css实现，css3距离普及还早着呢。目前主流浏览器对css3和html5的实现方式完全不一样，所以都得单独设置。