css3 矩阵的使用详解


Posted in HTML / CSS onMarch 20, 2018

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

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

对应于就是:

css3 矩阵的使用详解

实际应用中的转换就是:

css3 矩阵的使用详解

其中:

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矩阵

css3 矩阵的使用详解 

对应的 css 写法为:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 #HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 #HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 #HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
You might like
新闻分类录入、显示系统
2006/10/09 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
php引用传值实例详解学习
2013/11/06 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php封装的page分页类完整实例
2016/10/18 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
js 动态选中下拉框
2009/11/26 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python解析基于xml格式的日志文件
2017/02/25 Python
深入理解python中的atexit模块
2017/03/07 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
什么是python的自省
2020/06/21 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
报关报检委托书
2014/04/08 职场文书
学校推普周活动总结
2015/05/07 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
html5调用摄像头实例代码
2021/06/28 HTML / CSS
python实现学生信息管理系统(面向对象)
2022/06/05 Python