transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。
-
实现2D位移 translate()
translate(tx) 当参数设置一个值的时候,代表水平方向的位移;
translate(tx,ty) 第一个值代表水平方向的距离,第二个值 垂直方向的距离;
translate(tx,ty, tz) 第一个值代表水平方向的距离,第二个值 垂直方向的距离.第三个值 沿Z轴移动(3D效果下)
translateX(tx) 指定方向设置位移 沿X轴移动
translateY(ty) 指定方向设置位移 沿Y轴移动
translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D效果下) -
实现2D缩放scale()
说明: 属性值代表的是倍数,是不用加单位; 0——1 之间是 缩小的效果,大于1的时候都是放大效果, 默认值 是 1。
scale( 值1 ) 代表水平和垂直都放大或者缩小
scale( 值1,值2 ) 值1: 水平方向的缩放大小 值2 :垂直方向 -
实现2D旋转rotate()
说明: 属性值的单位是度(deg)
rotate() 沿着中心点旋转; 只能放一个属性值 ,正值:顺时针旋转; 负值: 逆时针旋转;
rotateX() 沿X轴旋转
rotateY() 沿Y轴旋转
rotateZ() 沿Z轴旋转(3D效果下) -
实现2D倾斜 skew()
说明:属性值的单位是度(deg) ;属性值为正值:向左 或向上倾斜 负值:向右或向下倾斜
skew( 值1 ) 一个值的时候 代表 沿X轴倾斜
skew( 值1,值2) 值1: 沿X轴的倾斜 值2 :沿Y轴的倾斜
skewX() 沿X轴的倾斜
skewY() 沿Y轴的倾斜
说明:元素通过 transform进行变形时,都是对其他元素的布局不产生影响的。不脱离文档流。
变形时元素默认情况下都是沿着元素的中心点去变形的
- 原点设置属性:transform-origin
定义:transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
说明:transform-origin:值1 值2 ; 值1: 水平 值2: 垂直
值:px % left top right bottom ;
附加:
backface-visibility :隐藏被旋转的 div 元素的背面
backface-visibility:visible;可见 (默认值)
backface-visibility:hidden;不可见