2D变换的知识点

2D变化(位移、缩放、旋转、扭曲、多重变换、变换原点)

1.2D位移

2D 位移可以改变元素的位置,具体使用方式如下:

先给元素添加转换属性 transform

编写 transform 的具体值,相关可选值如下:

translateX 设置水平方向位移,需指定长度值;若指定的是百分比,是参考自身宽度的百分比.

translateY 设置垂直方向位移,需指定长度值;若指定的是百分比,是参考自身高度的百分比。

translate 一个值代表水平方向,两个值代表: 水平和垂直方向。

3.注意点

1、位移与相对定位很相似,都不脱离文档流,不会影响到其它元素。

2、与相对定位的区别: 相对定位的百分比值,参考的是其父元素,定位的百分比值,参考的是其自身。相对定位可以让一个元素变成另外一个元素的包含块

3、浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。

transform 可以链式编写,例如:,

transform: translateX(38px) translateY(48px);

位移对行内元素无效

6、位移配合定位,可实现元素水平垂直居中

position : absolute: //必须要开启绝对定位

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

transform:translateX(30px) translateY(30px); X和Y方向上的唯一都会显示

transform:translateX(30px);

transform:translateY(30px); //分开写的话,写在下面的会把写在上面的覆盖掉

下面的translateY会把translateX覆盖掉,就只有translateY没有translateX了

水平垂直居中的方法二:

inner2 (

width: 60px;

height:60px;

background-color:orange;

position: absolute; //必须要开启绝对定位

top: 50%;

left: 50%;

margin-left:-30px;

margin-top:-30px;

2D缩放

缩放是指:让元素放大或缩小,具体使用方式如下

1先给元素添加转换属性 transform

2编写transform 的具体值,相关可选值如下:

缩放不对行内元素起作用

缩放的书写方式和平移一样

scaleX 设置水平方向的缩放比例,值为一个数字,1 表示不缩放,大于 1 放大,小于 1 缩小

scaleY 设置垂直方向的缩放比例,值为一个数字,1 表示不缩放,大于 1 放大,小于1 缩小

scale

同时设置水平方向、重直方向的缩放比例

一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。

注意点:

scale 的值,是支持写负数的,但几乎不用,因为容易让人产生误解.如果值是负数,会发生镜像翻转,本来是靠近左边的整正常的图像,会变成靠近右边的镜像翻转的图像。

借助缩放,可以实现小于12px的文字

translate 一个值代表水平方向,两个值代表: 水平和垂直方向。

2D旋转 rotate

transform:rotate(30deg) rotate写一个值的时候,默认是rotateZ

2D 旋转是指:让元素在二维平面内,顺时针旋转或逆时针旋转。

具体使用方式如下:

1先给元素添加转换属性 transform

2编写 transform 的具体值,相关可选值如下:

rotate 设置旋转角度,需指定一个角度值( deg ),正值顺时针,负值逆时针。

注意: rotateZ(20deg) 相当于 rotate(20deg),当然到了3D变换的时候,还能写: rotate(x,x,x)

4.2D扭曲(了解)

2D 扭曲是指: 让元素在二维平面内被"拉扯",进而"走形"实际开发几乎不用,了解即可,具体使用方式如下:

1,先给元素添加转换属性 transform

2、编写 transform 的具体值,相关可选值如下:

skewX 设置元素在水平方向扭曲,值为角度值,会将元素的左上角、右下角 拉扯。

skewY 设置元素在垂直方向扭曲,值为角度值,会将元索的左上角、右下角 拉扯。

skew 一个值代表 skewX,两个值分别代表: skewX 、 skewY

多重变换

transform:translate(100px,100px) scale(0.5);

transform:translate(100px,100px) rotate(30deg);

transform:rotate(30deg) translate(100px,100px);

//顺序不一样,导致最后旋转的中心点不一样

多重变换

多个变换,可以同时使用一个transform 来编写。

transform:translate(-50%,-50%) rotate(45deg);

注意点:多重变换时,建议最后旋转。

变换原点

位移一直是相对于坐标远点移动的。

元素变换时,默认的原点是元素的中心,使用 transform-origin 可以设置变换的原点。

修改变换原点对位移没有影响,对旋转和缩放会产生影响。

如果提供两个值,第一个用于横坐标,第二个用于纵坐标。

如果只提供一个,若是像素值,表示横坐标,纵坐标取 50%;

若是关键词,则另一个坐标取 50%

transform-origin:50% 50%;表示转换的原点位于元素中心。具体来说,第一个50%表示原点位于元素水平中线,第二个50%表示原点位于元素垂直中线。例如,当你对一个元素应用旋转转换时,该元素会围绕其中心点旋转。

如果是位移的话,百分比是相对于元素自身的百分比。

transform-origin: left top ,变换原点在元察的左上角。

transform-origin: 50px 50px ,变换原点距离元素左上角 50px 50px 的位置

transform-origin: 0,只写一个值的时候,第二个值默认为 50%。

变换原点的属性值可以写(关键字,像素值,百分比)。

变换原点的位置对旋转、缩放有影响,对位移没有影响

可以通过关键字、像素值、百分比来调整变换原点

transform-origin:top; //只给一个值

transform-origin:right top; //给两个值

相关推荐
你的人类朋友1 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar1 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界4 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙4 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump4 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD4 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro5 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin5 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马5 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610375 小时前
干净的图片批量处理,处理速度飞快
前端