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 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- 每日一水之strcmp用法
- HDU 3782 xxx定律
- HDU 2566 统计硬币
- HDU 2561 第二小整数
- python基础-数据类型与变量
- HDU 2520 我是菜鸟,我怕谁
- HUST 1586 数字排列
- next_permutation(全排列算法)
- Hadoop数据分析平台实战——100HBase和MapReduce整合离线数据分析平台实战——100HBase和MapReduce整合
- Hadoop数据分析平台实战——120Hive Shell命令介绍 01(熟悉Hive略过)离线数据分析平台实战——120Hive Shell命令介绍 01(熟悉Hive略过)
- HUST 1588 辗转数对
- HUST 1584 摆放餐桌
- HUST 1585 排队
- 【QQ/微信个人号变身机器人】炸群+远程监控个人PC的尝试
- 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 数组属性和方法
- 转录组分析 | 使用Trimmomatic过滤Fastq文件
- 转录组分析 | 使用FastQC进行数据质控
- R语言绘图 | 给箱线图加个点
- R语言绘图 | 使用pheatmap快速绘制热图
- 可能是目前最详细从零开始配置 TypeScript 项目的教程
- 比对得到的SAM文件怎么看?
- ANTNet|端侧架构,精度速度双超MobileNetV2
- 9个动图带你进入PyQtGraph的强大可视化世界
- 转录组分析 | 使用STAR进行比对
- 使用R/qtl进行QTL分析
- 转录组分析 | 使用RSEM进行转录本定量
- 使用R语言计算遗传力
- 专属于六倍体小麦的Bioconductor注释包
- 轻松上传超过100M的文件至GitHub
- 转录组分析 | 使用DESeq2进行基因差异表达分析