在这篇文章中，我们来学习一下“CSS3矩阵变换的应用格式是什么，如何使用矩阵”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

css3 矩阵变化. 应用格式为:

transform: matrix(a,b,c,d,e,f);

对应于就是:

实际应用中的转换就是:

其中:

ax+cy+e = 横坐标

bx+dy+f = 纵坐标

为什么会多出 0 0 1呢？ 因为, 为了凑参数.

translate 矩阵

基本格式为:

transform: matrix(1, 0, 0, 1, X, Y); // X 横向平移, Y 纵向平移

scale 矩阵

scale(缩放) 的矩阵也挺简单.

// 将 X 轴缩放 A 倍
// 将 Y 轴缩放 B 倍
matrix(A, 0, 0, B, 0,0);

当然, 如果你在最后两位写上数字, 代表着, 先缩放再平移.

// 得到: X 轴 = 0.3*x + 100
// 得到: Y 轴 = 0.2*x + 200
matrix(0.3,0,0,0.2,100,200);

rotate 矩阵

rotate 实际上和三角函数有很大的关系. 首先,确定你的旋转角(顺时针旋转). 然后, 计算 sinθ 和 cosθ. 最后的矩阵公式为:

matrix(cosθ,sinθ,-sinθ,cosθ,0,0) // 就是 cs-sc

skew 矩阵

skew(拉伸) 矩阵也是三角函数, 不过, 用到的是tanθ. 格式为:

// 将 Y 轴向 X 轴倾斜 A°
// 将 X 轴向 Y 轴倾斜 B°
matrix(1,tan(A),tan(B),1,0,0)

3D变换矩阵

3D 变换是 4*4 的矩阵. 他和 2D 类似,只是, 多出一个Z。 // 这是缩放的3D矩阵

 

对应的 css 写法为:

transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

以上就是关于“CSS3矩阵变换的应用格式是什么，如何使用矩阵”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• AmazeUi如何实现简单的Tree树形结构，代码是什么

  这篇文章主要介绍了AmazeUi Tree(树形结构) 应用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS盒子模型元素的宽高怎么算，外边距塌陷怎样解决

   我们通常设置的宽度和高度，是指盒子模型中内容（content）的宽度和高度。元素的高度，还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin；宽度类似计算。注意：父子元素包含情况下的计算，父亲元素会把儿子元素的整个盒子（包括margin）的大小作为内容。外边距塌陷(margincollapse)，块元素的top与bottom外边距有时

• 使用CSS实现播放声音有几种方法？

  使用CSS实现播放声音有几种方法？我们知道CSS的功能是很强大的，改变网页样式、颜色、布局，实现动画等等，今天我们来了解用CSS实现播放声音的技巧，感兴趣的朋友就继续往下看吧。

• CSS导航栏固定的语法及代码是什么

  在css中，可以利用position属性把导航栏固定住，只需要给导航栏元素添加“position:fixed;”样式，将导航栏相对于浏览器窗口进行固定定位即可，这样被固定的导航栏元素就不会随着滚动

• css中如何实现平均布局？方法是什么？

  css中如何实现平均布局？在实际的项目中，我们可能会遇到实现平均布局的需求，那么这个效果怎样做呢？我们可以使用负margin的方法来实现，接下来我们一起来看一个实现示例。