2d转换的方法:
translate(x,y)作用:沿X,Y轴位移
参数-长度值:
可以是1-2个值
1个值表示沿X轴位移,两个值表示分别沿X轴,Y轴位移
取值:px & 百分比(强调相对于元素本身大小计算)说明:允许负值,正值默认向右向下,负值向左向上
拆分单独定义:
translateX( 长度值 ) 沿X轴缩放
translateY( 长度值 ) 沿Y轴缩放
结合定位实现居中第三种方式demo:
父盒子{
position:relative;
}
子盒子{
position:absolute;
left:50%;
top:50%;
//沿着自身原来位置移动自身宽度、高度的一半
transform:translate(-50%,-50%);
}
scale(x,y)作用:沿x,y轴缩放元素大小
参数-数值,表示缩放倍率(没有单位的数字)
可以是1-2个值
1个值,表示沿X轴,Y轴同时缩放
2个值 两个值表示分别沿X轴、Y轴缩放
取值-默认值为1 不放大也不缩小
使用0~1之间的值 【缩小】元素
使用大于1的值【放大】元素。
允许负值——负值表示先反转再缩放
单独定义:
scaleX( 缩放倍率 ) 沿X轴缩放
scaleY( 缩放倍率 ) 沿Y轴缩放
skew(x,y)作用:沿x,y轴 倾斜元素
参数-角度(单位通常使用deg)
skew(x,y) 水平方向和垂直方向同时倾斜
1个值沿X轴方向的斜切
2个值分别表示沿X,Y轴方向的斜切
单独定义:
skewX(x)仅水平方向(X轴)倾斜
skewY(Y)仅垂直方向(Y轴)倾斜
rotate( angle )作用:定义2d旋转
参数:角度(单位通常使用deg)
取值-角度,单位deg
正数表示顺时针旋转,负数表示逆时针旋转
转换基点:transform-origin 定义转换原点(基点)
transform-origin:x轴位置 y轴位置 Z轴位置(默认0);
空格隔开的两个值时,分别表示x轴,Y轴位置
一个值时,另一个值默认center
取值-px (相对于元素本身左上角为0.0点的坐标位置) / 百分比 (元素自身大小的百分比)
关键字:
水平:left center right
垂直:top center bottom
3d转换:
3d坐标轴:
3d转换的方法
rotateX(angle)作用:沿着 X 轴旋转
取值-角度:单位deg
正值顺时针,负值逆时针
perspective属性
表示视距(观察者距离视图的距离)
作用:使子元素以透视效果显示(近大远小)
取值:
number 元素距离视图的距离,以像素计。
none(0)默认值。表示没有透视效果透视。
值越小透视效果越明显
注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
rotateY(angle)作用:沿着 y 轴旋转
取值-角度:单位deg
正值顺时针,负值逆时针
rotateZ(angle)作用:沿着 Z 轴旋转
取值-角度:单位deg
正值顺时针,负值逆时针
translateZ( z )作用:沿Z轴位移
取值-px 不允许百分比值
scaleZ( z )作用:沿Z轴缩放
取值-默认值为1
使用0~1之间的值【缩小】元素,
使用超过1的值【放大】元素
transform-style作用定义嵌套子元素是否以3d空间呈现
取值:
flat 子元素在2D平面呈现。
preserve-3d 子元素以3D空间呈现
注:通常加给父元素 只对3d转换的元素有效
transform多组值 简写
多重转换 —— 空格隔开
transform:rotateY(80deg) scaleZ(2);
3d函数:
tranlate3d(X,Y,Z)作用:定义元素在X,Y,Z轴上的平移
例:
translate3d(100px,200px,300px) 表示分别沿x轴平移100px, y轴平移200px,Z轴平移300px
scale3d(x,y,z) 作用:定义元素在X,Y,Z轴上的缩放
例:
scale3d(2,1.5,0.5) 表示分别沿x轴放大2倍,y轴放大1.5倍,Z轴缩小0.5
rotate3d(tx,ty,tz,角度)作用:定义元素在X,Y,Z轴上的旋转
tx,ty,tz 矢量值
其中两上为0,另一个值只有0与非0的区别
rotate3d(0,0,1,30deg) 沿Z轴旋转30deg 相当于 rotateZ(30deg)
rotate3d(1,0,0,30deg) 沿X轴旋转30deg 相当于 rotateX(30deg)
rotate3d(0,1,0,30deg) 沿y轴旋转30deg 相当于 rotateY(30deg)
其中两个不为0,tx,ty,tz相当于倍率
rotate3d(1,1,1,30deg) 沿X轴旋转30deg 沿y轴旋转30deg 沿z轴旋转30deg
rotate3d(0.5,1,0,30deg) 沿X轴旋转15deg 沿y轴旋转30deg