大家好，今天跟大家分享的是纯CSS实现鼠标滑过图片3D翻转效果的方法，下面看下效果图：

效果图

效果分析：从效果图中可以看到当鼠标滑过图片时，图片延Y轴-90°旋转逐渐消失，而与图片相关的文字部分延Y轴旋转-90°逐渐显现，当鼠标移开时又逐渐恢复到初始位置。初始位置时图片和文字部分的位置关系如下图所示：

初始位置

HTML结构：全部内容置于一个div（.main)盒子内，里面有三个主体div(.box)，每个.box中有两个div(.back和.front)，.front用于放置图片，本例中以背景的形式添加，.back用于放置文本信息，里面包含一个标题，一段文字，两条白色横线（由<span></span>标签生成），下图为HTML代码：

CSS设置：

主体div（.box）样式设置：“transform-style:perspective-3d”让元素在3D空间内呈现，延X轴旋转-10°调整可视面，这两步是为了让元素看上去更立体，在日记翻页效果教程中有提到过；“display-inline-block"让三幅图片在同行显示。"position:relative"因为后面子元素需要绝对定位。

文本部分（.black)样式设置：与父元素.box同高同宽，位置覆盖，给一个背景颜色和适当的透明度（opacity：0.8），延Y轴顺时针旋转90°，垂直电脑平面，必须在此处添加过渡效果，如果在hover中添加会导致鼠标移开时动画过渡生硬，直接恢复到初始位置。

图片部分（.front）样式设置：动画过渡效果同上，依旧在此处添加，不要添加到hover中，分别以背景的形式添加图片。

文本信息具体样式设置：都是一些基本样式，根据个人喜好随便搞，文中的两条白色横线由<span> 标签生成，220像素的宽即长度，1个像素的高则是粗细程度，颜色由背景颜色生成。

hover样式设置：当鼠标滑过.box区域时，正常显示的图片部分延Y轴逆时针旋转90°与电脑平面垂直逐渐在视线中消失，而文本信息部分延Y轴逆时针旋恢复到原始位置逐渐显示，鼠标移开时各自又慢慢回复到初始位置。上面提到的过渡效果如果添加到这里的hover中，鼠标移开时两者会直接生硬地恢复到初始位置。

好了大功告成，刷新页面查看效果吧！

如果发现问题请及时@窗外楼，不胜感激！