css3学习笔记二

Posted 2020-08-05 逃学威龙

      接着是对图形移动、旋转、倾斜、放缩的处理。

      -moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/

      -moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/

      -moz-transform:skew(x deg);/*图形倾斜*/

      -moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/

      -moz-transform:scale();/*对图形放缩大于1是放大，小于1大于0是缩小，小于0会有反转的效果然后放缩*/

      然后重点来了，perspective，perspective-origin。

perspective：可以理解为镜头于界面的距离，就是你眼睛的方位，这个会影响3D图形的透视效果，perspective值大的时候图形会小，基本上是远大近小，当然如果小于图形的z轴值会相当于在立体图形内部看。

perspective -origin：可以理解为镜头的距离，就是相当于一束光从不同方位照物体会有不同的影子这个影子就是我们看到的3D图形。