家好，今天跟大家分享的是纯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中，鼠标移开时两者会直接生硬地恢复到初始位置。

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

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

家好，本篇文章分享小方块永久旋转的动画特效，欢迎参考和指正。

效果图：

HTML代码：

<div class='tui-demo-1'></div>

CSS代码：

<style type="text/css">
.tui-demo-1 {
 width: 100px;
 height: 100px;
 background: #FF5722;
 margin: 50px auto;
 animation: tui-demo-1 1.0s infinite;
}
@keyframes tui-demo-1 {
 0% {
 transform: perspective(180px) rotateX(0deg) rotateY(0deg);
 }
 100% {
 transform: perspective(180px) rotateX(0deg) rotateY(180deg);
 }
}
</style>

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-1元素上，并指定该动画需要1秒完成，infinite则表示无限次播放该动画。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。这里的perspective允许改变3D元素的透视图，且只影响3D元素的转换。rotateX表示沿着X轴作3D旋转，rotateY表示沿着Y轴作3D旋转。

最后注意下浏览器兼容问题，animation，transform等可再创建-webkit-,-ms-或-moz-配置。如：-webkit-animation: tui-demo-1 1.0s infinite;

有问题可以留言，大家一起学习HTML+CSS网页设计。

惠券一般在商城项目中常用到，今天就来讲解下如何用纯CSS3来实现该效果：

效果图如下：

首先该效果中左右有两个锯齿形的波浪调，背景图还有不同色的间隔，下面来看看实现代码：

html:

具体CSS:

难点实现方法审查元素具体详解：

该背景层实现运用到了CSS3旋转属性