css3图片与文字3D transform切换:
http://www.w3cplus.com/demo/419.html
详细的CSS3属性详解：
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
总结如下：
1、需要使用到的CSS3属性
透视和视角：perspective:8000px; -------------放在舞台上（.box)
需要用到transform的3D变换，即：transform-style:preserve-3d;-------------------------放在容器上(.inner)
translateZ，Z坐标移动，这个需要与perspective搭配使用，transform:translateZ(150px) 里面的数值为舞台高度的一半
rotateX,X方向旋转----------------------刚开始去.r2进行旋转-90度使其看不见，rotate(-90deg)
html布局：
<div class="box">
<div class="inner">
<div class="r1">1</div>
<div class="r2">2</div>
</div>
</div>
CSS：
/*舞台*/
.box {
width: 500px;
height: 300px;
position: relative;
-webkit-perspective:8000px; //透视和视角
}
/*容器*/
.inner {
width: 100%;
height: 100%;
-webkit-transform-style:preserve-3d; //3d变换
transition:.6s;
}
/*内容*/
.r1 {
position: absolute;
width: 100%;
height: 100%;
background: red;
outline:5px solid #000;
-webkit-transform:translateZ(150px); // 里面的数值 = 舞台高度的一半
}
.r2 {
position: absolute;
width: 100%;
height: 100%;
background: yellow;
outline: 5px solid blue;
-webkit-transform:rotateX(-90deg) translateZ(150px); //里面的数值 = 舞台高度的一半，刚开始通过rotateX(-90deg)隐藏在下方
}
/*交互*/
.inner:hover {
-webkit-transform: rotateX(90deg); //让r2出现
}
如果需要左右翻转，只需要更改rotateX为rotateY，translateZ(宽度的一半)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
另一种翻转效果，结构不变，样式如下：
.box {
width: 300px;
height: 300px;
-webkit-perspective:8000px; /*设置舞台：透视和视角*/
position: relative;
}
.inner {
width: 100%;
height: 100%;
-webkit-transform-style:perserve-3d; /*设置场景：3d变换*/
}
.inner div{
position: absolute; /*绝对定位：使正面和反面全部重合*/
top:;
left:;
width: 100%;
height: 100%;
border-radius:50%;
text-align: center;
line-height: 300px;
-webkit-backface-visibility:hidden; /*背面隐藏*/
}
.r1 {
background: red;
-webkit-transition:1.5s; /*设置动画*/
}
.r2 {
background: yellow;
-webkit-transform:rotateY(180deg); /*刚开始，背面隐藏*/
-webkit-transition:1.5s;
}
.inner:hover .r1{
-webkit-transform:rotateY(180deg); /*翻转后，正面隐藏,反面出现*/
}
.inner:hover .r2 {
-webkit-transform:rotateY(0deg);
}
原理：
1、设置舞台和场景
2、使用绝对定位使正面和反面的div重合，让正面和反面的背面都隐藏，即：backface-visibility：hidden
3、让反面的旋转180deg先隐藏掉，当hover时，正面隐藏（旋转180deg），反面出现（旋转到0）