html倾斜变形,深入理解CSS变形transform(2d)_html/css_WEB-ITnose
× 目录 [1]变形原点 [2]变形函数 [3]多值
前面的话
CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本文将详细介绍变形transform2d的相关知识。为了更清楚地说明变形的整个过程,本文的DEMO中大量使用了CSS过渡transition。关于CSS过渡transition的详细情况移步至此
变形原点(2维)
变形原点transform-origin是指变形操作所依据的基点。默认情况下,变形原点位于元素的中心点。
transform-origin
值: x轴 y轴 z轴
初始值: 50% 50%
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
[注意]IE9-浏览器不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀,其他更高版本浏览器可使用标准写法
2维的变形原点transform-origin是由x轴和y轴两个轴的值共同确定的(不考虑3维的情况,z轴的值默认为0)
x轴: left | center | right | | y轴: top | center | bottom | |
【1】关键字
x轴left: 0% center: 50% right: 100%y轴top: 0% center: 50% bottom: 100%
//以rotate()旋转函数来说明变形原点。rotate(90deg)表示元素沿顺时针旋转90角度
【2】数值
x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量;y轴数值表示在y轴上离0点的偏移量
//以rotate()旋转函数来说明变形原点。rotate(90deg)表示元素沿顺时针旋转90角度
【3】百分比
其中x轴的百分比相对于元素的宽度和(width+横向padding+横向border),而y轴的百分比相对于元素的高度和(height+纵向padding+纵向border)
//以rotate()旋转函数来说明变形原点。rotate(90deg)表示元素沿顺时针旋转90角度
【4】单个值
当只有一个值时,默认第二个值为center
//以rotate()旋转函数来说明变形原点。rotate(90deg)表示元素沿顺时针旋转90角度
变形函数(2维)
变形transform是一系列变形函数的集合
transform
值: none | +
初始值: none
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
: translate | scale | rotate | skew | matrix
[注意]transform中出现多个变形函数时用空格分隔
[注意]位移、缩放、旋转和倾斜这四个操作中除了位移与变形原点无关,其余三个都与变形原点有关
矩阵matrix
实际上,位移、缩放、旋转和倾斜这四个操作都是通过矩阵matrix实现的。
matrix(a,b,c,d,e,f)函数有a,b,c,d,e,f这6个参数。而x和y是变形前元素的任意点。通过以下矩阵变换,生成对应的新坐标x'和y'。
x' = ax + cy + e;y' = bx + dy + f;
由此可得到默认a、d为1,b、c、e、f为0。a和d控制缩放,且不可为0;c和b控制倾斜;而e和f控制位移
位移
translate位移函数可以使元素从原来的位置上移动指定的位移。涉及位移的2d函数共3种,分别是translate()、translateX()、translateY()
[注意]元素发生位移后,元素的x轴和y轴跟着也一变移动,若元素再进行其他的变形操作,则要沿着改变后的x轴和y轴进行变形
translate(x[,y]?)
x表示元素在x轴方向上的位移;y表示元素在y轴方向上的位移
[注意]当y不存在时,相当于y=0;
translateX(x) 相当于 translate(x,0)
x表示元素在x轴方向上的位移
translateY(y) 相当于 translate(0,y)
y表示元素在y轴方向上的位移
[注意]位移函数相当于matrix(1,0,0,1,x,y)
位移函数还可以接受百分比。其中x%相对于元素水平方向的宽度和,y%相对于元素垂直方向的高度和
[注意]IE10浏览器有bug,元素的位移函数的百分比是相对于元素的可视宽高(不包括边框)而言的
//元素的主要样式为width:100px;height:100px;padding:10px;border:10px solid black;
缩放
scale缩放函数可以让元素根据变形原点进行缩放,默认缩放值为1。涉及缩放的2d函数共3种,分别是scale()、scaleX()、scaleY()
[注意]当元素被缩放后,若元素要进行位移,数值类型的位移值要乘以该缩放比例;百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后,再乘以缩放比例
scale(x,[,y]?)
x表示元素在x轴方向上的缩放比例;y表示元素在y轴方向上的缩放比例
[注意]当y不存在时,相当于y=x
[注意]当x或y的值为负值时,元素先翻转再缩放
scaleX(x) 相当于 scale(x,1)
x表示元素在x轴方向上的缩放比例
scaleY(y) 相当于 scale(1,y)
y表示元素在y轴方向上的缩放比例
[注意]缩放函数相当于matrix(x,0,0,y,0,0)
倾斜
skew倾斜函数可以让元素以其变形原点围绕x轴和y轴进行一定角度的倾斜。涉及倾斜的2d函数共3种,分别是skew()、skewX()、skewY()
[注意]元素倾斜后,x轴和y轴发生倾斜,若元素要进行其他变形操作,则沿着倾斜后的x轴和y轴进行变形
skew(xdeg,[,ydeg]?)
x表示y轴向x轴倾斜的角度,y表示x轴向y轴倾斜的角度
[注意]当y不存在时,相当于y=0
[注意]x>0时,表示y轴向x轴正方向倾斜;x<0时,表示y轴向x轴负方向倾斜
[注意]y>0时,表示x轴向y轴正方向倾斜;y<0时,表示x轴向y轴负方向倾斜
skewX(x) 相当于 skew(x,0)
x表示y轴向x轴倾斜的角度
skewY(y) 相当于 skew(0,y)
y表示x轴向y轴倾斜的角度
[注意]倾斜函数相当于matrix(1,tany,tanx,1,0,0)
旋转
rotate旋转函数可以让元素通过指定的角度(deg)根据变形原点进行顺时针旋转,默认为0deg。与skew不同的是,rotate不会改变元素的形状。涉及到旋转的2d函数只有一个,就是rotate()
[注意]元素旋转后,元素的x轴和y轴也跟着发生旋转。若元素要进行其他变形操作,则沿着旋转后的x轴和y轴进行变形
rotate(Ndeg)
[注意]当N为正数时,元素进行顺时针旋转;当N为负数时,元素进行逆时针旋转
[注意]旋转函数相当于matrix(cosN,sinN,-sinN,cosN,0,0)
多值
transform变形可以接受多值,出现多个变形函数时用空格分隔,并且按照从前往后的顺序执行。
transform: ...
【1】多个变形函数的先后关系可以转换为多个元素的嵌套关系
相当于
.box{ width: 100px;} .in{ background-color: pink; height: 100px;}.out{ background-color: lightblue; height: 100px;}
【2】变形transform中的多个变形函数的执行顺序是从前向后依次执行
//第一种情况:旋转45deg后,元素的x轴正向变成右下45deg,所以元素接下来的位移向这个方向移动//第二种情况:元素向右移动100px后,元素的原点跟着元素一起平移,并一直在元素的中心位置,所以元素接下来的旋转是原地旋转
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html倾斜变形,深入理解CSS变形transform(2d)_html/css_WEB-ITnose相关推荐
- html3d变形,深入理解CSS变形transform(3d) - 小火柴的蓝色理想
前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础.3D变形涉及的属性主要是transform-origin.transform.transfor ...
- 深入理解CSS变形transform(3d)
前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础.3D变形涉及的属性主要是transform-origin.transform.transfor ...
- CSS 变形(CSS3) transform
一.2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前 ...
- CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
- 保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换 案例代码 效果图 元素变形原点 3D转换 3D转换--案例 案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
- php中修改弹窗的样式,CSS变形弹窗效果示例
大家都知道,弹出窗体已经是现在网页常用的一种交互设计,在这个注重交互动画体验的时代,网页弹窗也是可以来点新鲜点子的,比如今天分享的CSS 变形Modal Window. 当用户点击按钮时,按钮将会变成 ...
- css变形-扭曲(skew())
开发工具与关键技术:css skew属性 作者:黄海峰 撰写时间:2019.02.15 Css变形中的第二个属性扭曲(skew()),做一个样本,然后添加shew属性,看看会有什么变化. 浏览器打开: ...
- CSS中transform:skew属性理解
transform中通常用skew来对盒子进行倾斜.如下代码: #div{transform: skewY(10deg);} //对Y方向进行倾斜10度,意思是保留Y方向,将盒子沿着X方向进行倾斜. ...
- 纯css车牌倾斜矫正的方法 css图像透视变换
主要使用css里面transform的rotate和skew,一个是旋转,一个形变.我们先来看看概念: rotate() CSS 的 rotate() 函数定义了一种将元素围绕一个定点(由transf ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
最新文章
- Android画图学习总结(四)——Animation(中)
- 安装mysql为什么下载了很多_mysql下载与安装过程
- CVPR15 image retrieval reading list
- 遍历 HashSet 的方法
- Webbots、Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)
- win32汇编基础概念
- python 打开excel并在屏幕上呈现_excel-检查文件是否在Python中打开
- mariadb用户群体mysql_mysql(mariadb)新建用户及用户授权管理
- (对比PDF)Adobe Acrobat DC 离线对比PDF、draftable.com/compare 在线对比PDF
- 【无头浏览器】谷歌无头浏览器的几行代码简单设置?
- 【C语言】的%*d、%.*s等详解:
- O'Stolz 定理及其应用
- leetCode 318 最大单词长度乘积(位掩码,位运算,二进制)
- Greenplum 6 磁盘配额管理工具“Diskquota”
- eclipse如何设置中文
- 使用html5与js实现音乐播放器
- 量子密码学习笔记-量子态与量子门
- mysql仿网易评论_Android仿抖音评论列表(加评论功能)/网易云音乐列表
- SAP SMTP邮箱配置全过程
- Java后端技术框架