本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！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 翻转吧，就是这么简单，就是这么炫酷！
