CSS3 3D翻转效果 css3 3d旋转动画效果

互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。小妖发出的内容，都是自己实测过的，有问题请留言。

今天我们说一下如何用 css3 实现 3D 翻转，效果如下：

其实就几行代码

HTML部分：

• flip 是总的容器，position: relative;

• front 是正面，back 是背面，只需要把 flip 翻转就可以了

CSS部分：

点击时，只需要给 .flip toggleClass("run") 就可以了

代码见 Demo 页：

http://xngeer.frostbelt.cn/itemcss/3d.html

简单介绍下 css 各属性的含义：

-webkit-transition-duration: 1s; /* 动画持续时间 */

-webkit-transition-property: -webkit-transform; /* 动画改变的属性 */

-webkit-transform-style: preserve-3d; /* 子元素将保留其 3D 位置，可选 flat / preserve-3d，如果为 flat 则看不到背面 */

-webkit-backface-visibility: hidden; /* 背面不可见 */

perspective 在源码中做了注释，和 three.js 一样，理解为透视相机，近大远小。大家可以修改下 perspective 的值看下效果

再附上一个小妖自制的邀请函（素材部分来源于网络）

在你的页面里加个 3D 翻转吧，就是这么简单，就是这么炫酷！

动手试试吧~