如何用css搭建3D变形

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

如何用css搭建3D变形

推荐阅读更多精彩内容