1.什么是转换
改变元素在页面中的位置,大小,角度以及形状的一种方式。
2D转换:只在x轴和y轴上发生的转换效果
3D转换:增加在z轴的转换效果
2.转换属性
1.转换属性
属性:transform
取值:
1.none 默认值,无任何转换效果
2.transform-function
表示1个或多个转换函数
如果是多个转换函数的话,中间用空格隔开
注意:多个转换函数最好写在一起不然可能会产生替换
2.转换原点
属性:transform-origin
取值:数字/百分比/关键字
2个值:表示原点在x轴和y轴上的位置
3个值:表示原点在x轴,y轴,z轴上的位置
默认的原点在 元素的中心位置处
(center center)
(50% 50%)
3.2D转换
1.位移
1.什么是位移
改变元素在页面中的位置
2.语法
属性:transform
取值:
1.translate(x)
指定元素在x轴上的位移距离
取值为正,元素向右移
取值为负,元素向左移
2.translate(x,y)
指定元素在x轴和y轴的位移距离
x:同上
y:取值为正,元素向下移
取值为负,元素向上移
3.translateX(x)
在x轴上的位移
4.translateY(y)
在y轴上的位移
2.缩放
1.什么是缩放
改变元素在页面中的尺寸
2.语法
属性:transform
取值:
1.scale(value)
value:横向或纵向的缩放比例
value:默认值为1
>1: 放大
<1: 缩小
负数:放大(水平和垂直都翻转180度)
2.scale(x,y)
x:横向的缩放比例
y:纵向的缩放比例
3.单向缩放函数
scaleX(x)
scaleY(y)
3.旋转
1.什么是旋转
改变元素在页面上的角度
2.语法
属性:transform
取值:
rotate(ndeg)
n:取值为正,顺时针旋转
n:取值为负,逆时针旋转
注意:
1.转换原点会影响最后的转换效果
2.旋转是连同坐标轴一起旋转的,会影响旋转后的位移效果
4.倾斜
1.什么是倾斜
改变元素在页面中的形状
2.语法
属性:transform
取值:
1.skewX(xdeg)
让元素向着x轴的方向产生倾斜效果,实际上改变的是y轴的倾斜角度值
x:取值为正,y轴逆时针倾斜
x:取值为负,y轴顺时针倾斜
2.skewY(ydeg)
让元素向着y轴的方向产生倾斜效果,实际上改变的x轴的倾斜角度值
y:取值为正,x轴顺时针倾斜
y:取值为负,x轴逆时针倾斜
3.skew(x)
等同于skewX(xdeg)
4.skew(x,y)
4.3D转换
1.透视距离
模拟人的眼睛到3D转换元素之间的距离(z轴)
属性:perspective(景深效果,值越小效果越强烈)
注意:该属性要加在3D转换元素的父元素上
2.3D旋转
属性:transform
取值:
1.rotateX(xdeg)
以x轴为中心轴,旋转元素的角度
取值为正,顺时针旋转
2.rotateY(ydeg)
以y轴为中心,旋转元素的角度
3.rotateZ(zdeg)
以z轴为中心,旋转元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值大于0的数字时,表示该轴要参与旋转,取值为0则不参与旋转
rotate3D(1,0,0,45deg)只在x轴旋转45度
roatate3d(1,1,1,0deg)(大小写都可以)