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个面呢？
