3D effects

原文protip-nobody-expects-3d，只是觉得有趣记录一下，并非完整翻译。

基础3D

一个简单的制造深度感觉的方式是混合使用box-shadow, scale and transform。

当物体在表面移开的时候可以看到阴影展开，移回的时候阴影逐渐变小。

.box {
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transform: translateY(0) scale(0.95, 0.95);
}

.box .active {
  box-shadow: 0 11px 18px rgba(0,0,0,0.2);
  transform: translateY(-20px) scale(1, 1);
}

由于使用box-shadow在执行动画的时候会导致重绘，不推荐在移动设备上使用。更高性能的动画效果可以参考high-performance-animations的选项，GPU会帮你避免浏览器的重排和重绘。

旋转侧边栏

另一种你可以从另一边转移对象。让我们把一列对象旋转为另一列对象。

这里再次使用偏移效果，让动画看起来更有流动性。这是个小挑战因为你需要在3D空间里使用transforms和rotations放置对象以及目前浏览器没有用于调试3D的好UI。做了很多尝试让这个demo运行起来。

卡片翻转

对这个效果，你需要避免使用类似box-shadow的东西，像第一个效果，它会导致重绘（严重影响移动端性能）。如果你感兴趣，这是一个使用box-shadow实现的版本。

为了动画的比例和独立旋转，你不得不去勾画动画的keyframes关键帧，他们都可以通过transform很好的控制。全部使用transform的版本。

如果你还需要一些灵感，可以check out Effekt.css。一个收集高性能和基于CSS的娱乐性效果的社区杰作。