css transform matrix使用

2D变换

1.平移 translate

transform:translate(x,y)
transform:matrix(1,0,0,1,x,y)

2.缩放 scale

transform:scale(x,y)
transform:matrix(x,0,0,y,0,0)

3.旋转 rotate

transform:rotate(x)
transform:matrix(cos(x),-sin(x),sin(x),cos(x),0,0)

4.拉伸 skew

transform:skew(x,y)
transform:matrix(1,tan(y),tan(x),1,0,0)

3D变换

1.平移 translate

transform:translate(x,y,z)
transform:matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

2.缩放 scale

transform:scale(x,y,z)
transform:matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

3.旋转 rotate

transform:rotate(x,y,z,a)
transform:matrix(a,b,c,0,d,e,f,0,g,h,i,0,0,0,0,1)
| a d g 0 |
| b e h 0 |
| c f i 0 |
| 0 0 0 1 |

a=1-2.(y²+z²).sin²(a/2)
b=2.(x.y.sin²(a/2)+z.sin(a/2).cos(a/2))
c=2.(x.z.sin²(a/2)-y.sin(a/2).cos(a/2))

d=2.(x.y.sin²(a/2)-z.sin(a/2).cos(a/2))
e=1-2.(x²+z²).sin²(a/2)
f=2.(y.z.sin²(a/2)+x.sin(a/2).cos(a/2))

g=2.(x.z.sin²(a/2)+y.sin(a/2).cos(a/2))
h=2.(y.z.sin²(a/2)-x.sin(a/2).cos(a/2))
i=1-2.(x²+y²).sin²(a/2)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • TF API数学计算tf...... :math(1)刚开始先给一个运行实例。tf是基于图(Graph)的计算系统...
    MachineLP阅读 3,522评论 0 1
  • Simplification print(“字符串”),5/2和5//2的结果是不同的5/2为2.5,5//2为2...
    麦牛2013阅读 4,461评论 1 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,883评论 0 4
  • 三行 我想写一首三行诗 不知不觉 就写完了 彩虹 雨过天晴 孩子在心里看彩虹 少年在朋友圈看彩虹 大人看不到彩虹 ...
    鲸栗阅读 221评论 0 2
  • 未来我们企业最需要的是复合型人才、通用型人才、专业型人才、创意型人才; 这些年我还有一个发现,企业的创始团队都是人...
    方弟阅读 12,237评论 0 4