css transform
目录
前言
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);
更多>
二、使用
1.使用matrix3d需要在父级添加
代码如下(示例):
perspective:100;
perspective-origin: 50% 50%;
-webkit-perspective:100; /* Safari 和 Chrome //元素距离视图的距离,以像素计。 */
-webkit-perspective-origin: 50% 50%; /* Safari 和 Chrome */
2.使用
代码如下(示例):
就没了
总结
对于懒人来说还是很方便的,而且是用gpu可以提高性能。