灵感来自于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属性具有极强的关联性,一个属性的变化会带来一系列的变化,这里面的值是需要你去反复尝试才能获取到最佳。

我认为与其说是图形在变形,不如说是摄像师的位置,手法变了,造成了图形变形的假象。