<p>CSS transform 3d 翻译过来就是3d变换。
<img src="/content/images/2015/05/3d_axes.png"></p>
<p>先从最简单的<code>rotate</code>说起。</p>
<p><code>rotateX</code> 绕X轴旋转。</p>
<iframe width="100%" height="300" src="//jsfiddle.net/cs1707/04ko2e8L/1/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p><code>rotateY</code> 绕Y轴旋转。</p>
<iframe width="100%" height="300" src="//jsfiddle.net/cs1707/k33uzcsa/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p><code>rotateZ</code> 绕X轴旋转。</p>
<iframe width="100%" height="300" src="//jsfiddle.net/cs1707/dadjxauu/embedded/result,css,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>写不下去了，<code>perspective</code>, <code>perspective-origin</code>, <code>transform-style</code>, <code>backface-visibility</code> 请参考以下几篇文章：</p>
<ol>
<li><a href="https://css-tricks.com/almanac/properties/p/perspective/">CSS-Tricks perspective</a></li>
<li><a href="https://css-tricks.com/almanac/properties/p/perspective-origin/">CSS-Tricks perspective-origin</a></li>
<li><a href="https://css-tricks.com/almanac/properties/t/transform-style/">CSS-Tricks transform-style</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/">好吧，CSS3 3D transform变换，不过如此！</a></li>
<li><a href="http://www.alloyteam.com/2012/11/css3-3d-transform/">图文理解 CSS3 3D Transform </a></li>
<li><a href="http://www.w3cplus.com/css3/css3-3d-transform.html">w3cplus CSS3 3D Transform</a></li>
</ol>
