WEB前端

CSS3 3D翻转效果

位置:首页 > WEB前端 > css3教程,2018-08-11 17:06
今天我们说一下如何用 css3 实现 3D 翻转,效果如下:其实就几行代码HTML部分:flip 是总的容器,position: relative;front

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

CSS3 3D翻转(图0)其实就几行代码

HTML部分:

CSS3 3D翻转(图1)

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

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

CSS部分:

CSS3 3D翻转(图2)点击时,只需要给 .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 的值看下效果

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

CSS3 3D翻转(图3)

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

TAGS:CSS3 3D翻转

猜你喜欢

NewHot