CSS - 形变一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情 trans

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情

transform

transform是css的一个属性，该属性允许我们对一个元素进行各种各样的形变操作，包括平移，旋转，缩放，倾斜等

并非所有的元素都可以使用transform属性，行内非替换元素和表格相关元素不可以使用transform属性

# transform的值是一个或多个的形变函数
transform: none | <transform-function>+

常见的形变函数有:

函数名	描述	备注
translate(x, y)	平移	translateX和translateY函数的简写方式
scale(x, y)	缩放	scaleX和scaleY函数的简写方式
rotate(deg)	旋转	rotateZ函数的简写方式
skew(deg, deg)	倾斜	skewX和skewY函数的简写方式

transform的特点:

translate函数用于在平面上对元素进行位移操作

参数个数

个数	说明
一个值	设置x轴上的位移
两个值	设置x轴和y轴上的位移

值类型

类型	说明
数字	100px， 10rem等
百分比	参照元素本身( refer to the size of bounding box ) 包括元素自身的width/height，padding，border

/*
	当translate函数只设置了x轴的值的时候
	y轴上的值默认为0
	等价于 translate(100%, 0) 
*/
transform: translate(100%);

scale函数可改变元素的大小

值个数

个数	说明
一个值	x轴和y轴缩放相同的值
两个值	设置x轴和y轴上的缩放

值类型:

类型	说明
数字	大于0，小于1 --- 缩放等于1 --- 不变大于1 --- 放大
百分比	相对于元素自身的宽度或高度

/* transform: scale(0.5, 0.5); */
/* 等价于 */
transform: scale(50%, 50%);

/*
	scale(0.5) 等价于同时设置 scaleX(0.5) scaleY(0.5)
*/
transform: scale(0.5);

rotate(<angle>) 可以将元素在平面上进行旋转

当<angle>的值为正数的时候，元素会顺时针旋转

当<angle>的值为负整数的时候，元素会逆时针旋转

值个数

值类型:

类似	举例	备注
度 degrees	90deg	最为常用
百分度 gradians	100grad	百分度又称为梯度，主要用于建筑和测量领域百分度会将圆等分为400分，所以其中90度即为100grad
弧度 radians	0.25turn
圈数 turns	3.1416rad

skew(x, y)函数定义了元素如何在平面上进行倾斜

对于x轴，正值表示的是向左倾斜，负值表示的是向右倾斜

对于y轴，正值表示的是向下倾斜，负值表示的是向上倾斜

在skew函数中，参数x和参数y的类型都是度数

值个数

个数	说明
一个值	表示x轴上的倾斜, y轴上的值默认为0
两个值	表示x轴和y轴上的倾斜

值类型: skew函数参数的类型可以支持弧度，角度，梯度和圈数，其中最常用的为弧度

# + 表示的函数是设置多个值，且多个值之间使用 空格进行分割
transform: none | <transform-function>+

transform: scale(0.5) rotate(45deg);

transform-origin用于改变元素的形变原点，默认情况下transform-origin的值为center center

值的个数

个数	说明
一个值	设置x轴的原点, y轴上的默认值是center
两个值	设置x轴和y轴的原点

值的类型 : 必须是<length>,<percentage>或是left, center, right, top, bottom等多个关键字中的一个

其中X轴上可以设置的关键字为top，center, bottom

其中Y轴上可以设置的关键字为left, center, right

transform-origin中，如果设置的值为<percentage>, 那么其相对的就是自身宽度或高度