10.13 如何使用transform样式?
时间:2022-07-28
本文章向大家介绍10.13 如何使用transform样式?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何使用transform样式?
matrix3D是3D变换,是4*4的矩阵。matrix是2D变换,是3*3矩阵。
该样式允许我们旋转,缩放,倾斜或平移给定元素,它是通过修改CSS视觉格式化模型的坐标空间来实现的。
旋转
rotate
transform: translate(50%,50%) rotate(50deg);
缩放
scale
倾斜
skew
平移
translate
示例
transform: translate(50%,50%) skew(45deg,10deg);
matrix
斜拉(skew),缩放(scale),旋转(rotate)以及位移(translate)。
中心点
改变中心点的样式:
transform-origin: left bottom;
matrix转换关系图
matrix平移
transform: matrix(1, 0, 0, 1, 30, 30);
/* a=1, b=0, c=0, d=1, e=30, f=30 */
相当于
transform: matrix(1, 0, 0, 1, 30, 30);
transform: translate(30px,30px)
matrix缩放
matrix(s, 0, 0, s, 0, 0);
套用转换关系公式,有:
x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;
所以matrix(sx, 0, 0, sy, 0, 0);,等同于scale(sx, sy);
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- HDUOJ---1241Oil Deposits(dfs)
- HDUOJ------2398Savings Account
- HDUOJ-----2399GPA
- HDUOJ----旋转的二进制
- HDUOJ---3743Frosh Week(BIT+离散化)
- Node.js新手必须知道的4个JavaScript概念
- HUDOJ-----1394Minimum Inversion Number
- 提升 Node.js 应用性能的 5 个技巧
- HDUOJ-----1166敌兵布阵
- HDUOJ------2492Ping pong
- HDUOJ----2489 Minimal Ratio Tree
- HDUOJ----2487Ugly Windows
- HDUOJ--------1003 Max Sum
- HDUOJ -----1864 最大报销额(动态规划)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法