记录css transform

css transform

目录

前言

二、使用

1.使用matrix3d需要在父级添加

2.使用

总结

---

前言

css transform能提供很多有趣的变换，自身使用后不会脱离文档流 经过transform的节点 原位置保持不变 只是对节点本身进行动画变形.所以使用时可以先脱离文档流。

---

一、主要API

matrix(n,n,n,n,n,n);(水平缩放,水平斜切,垂直斜切,垂直缩放,水平位移,垂直位移)

示例：matrix(cos*scaleX , sin , -sin , cos*scaleY , x ,  y  );(和canvas的一模一样)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);(4阶行列式，这里我感觉相当于直接就是片元着色器的输出变换了)

scale(x,y);

scale3d(x,y,z);

更多>

CSS transform 属性

二、使用

1.使用matrix3d需要在父级添加

代码如下（示例）：

perspective:100;
perspective-origin: 50% 50%;
-webkit-perspective:100;	/* Safari 和 Chrome //元素距离视图的距离，以像素计。 */
-webkit-perspective-origin: 50% 50%;	/* Safari 和 Chrome */

2.使用

代码如下（示例）：

就没了

---

总结

对于懒人来说还是很方便的，而且是用gpu可以提高性能。