TOC
灵感来自于segmentfault的一个页面，在看到之后仔细研究了一下transform的3d变形效果。
其实css3的3d效果也是伪3d,依赖一些变形算法来做到的模拟效果，但还是比较复杂的，关键在于如何理解里面的各个设置到底是设置那方面的
.wrapper{
position:absolute;
text-align:center;
transform: perspective(300px) rotateX(25deg) ;
/* 摄像机z距离300px 目标物体x轴向下旋转25度 两者必须 */
width:18em;
height:50em;
margin-left:-9em;
font-size:350%;
left:50%;
bottom: 0;
transform-origin:50% 100%;
/* 摄像机的 x 与 y 轴的位置。 */
overflow: hidden
}
比如这个wrapper层的作用其实是创建一个变形后的可视区域，因为父元素变形会导致子元素一起，所以就能造成子元素一起倾斜，并随着上升逐渐字体逐渐变小的效果。
对于如何变形而言，首先我们要把自己想象成一个拿着摄像机的摄影师。重要的视口在我们脚下，而我们可以随意的上下起飞，调整相机的角度，从而获取合理的图像，最重要的如下几个属性，
perspective - 我把这个看成是摄影师的高度，值越大，飞的越高
rotate - 这个是摄像机的角度，默认为直接向下，与地面垂直，而比如25deg 就是把摄像机朝前方进行旋转，可以认为是尽量往前拍。
transform-origin - 这两个值是perspective的关联属性，pers是高度，这两个就是在空中的位置。类似经纬度，摄影师从空中的什么地方去拍。
最重要的就是3d属性具有极强的关联性，一个属性的变化会带来一系列的变化，这里面的值是需要你去反复尝试才能获取到最佳。
我认为与其说是图形在变形，不如说是摄像师的位置，手法变了，造成了图形变形的假象。