如何用css搭建3D变形
发布在Yun.kou的专栏2014年2月27日view:3521
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Ana Tudor 是当你点击她CodePen账号你会~被~吓~尿的女神。你会不禁喊道“天(wo)呐(cao)”。这条女汉子屌爆了。她css创造了让人难以置信的视觉效果,我最喜欢this infinitely unpacked prism这个效果。下面的文章介绍了她惊艳的3D变形的经验和过程。

ie9和Opera 12以下 是不支持 CSS 3D transforms ,关于支持信息细节请移步caniuse.co.

css动画现在已经非常流行了,当然我说的是不只是简单颜色变化和尺寸的变化,3D变形动画也很火。css立体翻转就是很好的例子。你可以找到些关于css变形的代码,更重要的是程序员要理解什么激动的要发生。让我带你一步步贯穿如何构建 3d变形动画。

我们来看,有个门在门框里。 http://jsbin.com/cugoboci/1/

很简单的html

<div class='container'> <div class='frame'> <div class='door'></div> </div> </div>

为了让门打开,我们添加个class:“door–open”

<div class='container'> <div class='frame'> <div class='door door--open'></div> </div> </div>

现在我们讲对这个class 应用3D变形。应用到transform-origin

.door--open { transform-origin: 0 0 /*whatever y value you wish*/; transform: rotateY(-45deg); }

效果 看起来不怎么靠谱,有一种特性叫做透视,用来解决这个问题,透视顾名思义,近大远小。 css 透视属性 perspective 应该应用到3d变形的父元素上面。当然只能在WebKit内核浏览器实现,在火狐,ie是不行滴。

那现在我们把透视样式 frame–realistic 用到门框上

<div class='container'> <div class='frame frame--realistic'> <div class='door door--open'></div> </div> </div>

现在我们把perspective应用上 perspective的值越小视觉上离眼睛比较近,让变形的元素显示比较大

.frame--realistic { perspective: 20em; }

效果

现在看起来好多了,但是我们可以做更多,例如我们可以给门加一些3D的动画,把门的class door–open换成 door–ani,css如下

.door--ani { transform-origin: 0 0; animation: doorani 1.3s ease-in-out infinite alternate; }@keyframes doorani { from { transform: rotateY(-43deg); } to { transform: rotateY(43deg); } }

那现在我们把3d动画放到门框上把透视放到container上面。

效果

现在感觉不太对,感觉门和门框在一个平面内。这个是门框transform-style的缘故默认是flat。 当我们设置成preserve-3d 时候保留3d视图效果,这个不大好懂,参考文章图文理解 CSS3 3D Transform

效果

我们来试试4个面立方体

效果

让它动起来

效果

什么?? 这么简单就完了? 骚年100个面呢?

再来几个变态的

http://codepen.io/thebabydino/pen/wsxpE

http://codepen.io/thebabydino/pen/nCdDw

评论
发表评论
4年前

@夏小虫–_– 我还记得初一的时候逃课去玩传奇。那时候想如果能有3D虚拟的网游该多好啊。 后来念高一魔兽世界来了。 就三年时间。

4年前

一开flash,cup就咆哮了,css3,html5 也感觉cup吃不消,是电脑不行了吗。

WRITTEN BY
Yun.kou
web设计师 前端重构 致力于设计与前端一体设计
TA的新浪微博
PUBLISHED IN
Yun.kou的专栏

人丑技术烂

我的收藏