Question

CSS3翻转图片问题

<style>
div
{
width:500px;
height:300px;
background-image:url(111.jpg);
-webkit-transition: -webkit-transform 5s;
}

div:hover
{
-webkit-transform:rotateY(180deg);
}
</style>
代码在这，现在可以实现图片翻转效果， 想问一下加什么代码可以实现翻转过去是另一张图片，也就是说翻转90度以后第一张图片应该是消失的，然后另一张图片继续展开到结束

其实这个效果就是把图片宽度按比例缩小到0然后宽度变大，只不过图片再宽度变大的时候是反过来的

Answer 1

对你的问题倒是没有答案，只是看到你问题，想插句嘴。你注意-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的实现方式完全不一样，所以都得单独设置。

追问

我主要就是用Chrome浏览器 这个没什么问题 所以别的我都省略了 只用-webkit前缀

追答

...做网站貌似是给别人看的吧。。。

追问

我知道是给别人看，关键是现在自己用固定的一个浏览器都实现不了。，还拿什么给别人看

追答

目前css3实现不够稳定，各个浏览器差异很大。不如直接通过js事件在鼠标悬停时切换图片，或者切换显示/隐藏状态。这才是主流的实现方式。

追问

因为要学CSS3 所以才尝试做这个效果，如果用JS+CSS实现别的效果，那不就跟CSS3没关系了么，谢谢你了

追答

我也学过一些CSS3的东西，所以也大体了解一些；但在工作中完全用不到，因为不能要求浏览者用特定的浏览器。CSS2已经存在一堆未解决的兼容性问题了，CSS3估计以后才能正式能被大家接受。

追问

既然有了CSS3和HTML5 就总有一天会普及代替CSS2和HTML4.0 ，总会用到的

Answer 2

div:hover 里面透明度设置为1 ，就是不透明，添加背景图片background-image就可以了~按理说这种方法是错的。你要2面都有内容的话，需要2个div，分别代表正面的内容和反面的内容才行。

Answer 3

尝试在

div:hover
{
-webkit-transform:rotateY(180deg);
background-image:url(222.jpg);
}

里加上另一张背景呢？

追问

这个试过了 是不行的，如果加另一个背景，效果就是 当前背景图旋转180度以后直接变成另一张图片

追答

由于时间比较紧张，为你提几个思路吧：
1、在此层下建立一个层，上层覆盖下层，当hover时上层变，下层也变，使动画连贯起来。
2、尝试透明度降低，虽然比较凑合，但或许能实现效果。
3、JS方式，翻转90，然后替换图片，就是比较硬性的过程了。

追问

嗯 我再想想办法 谢谢你了