在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。
注意:都是以中心点为原点进行移动旋转缩放倾斜的。
skew的默认原点是transform-origin是这个物件的中心点。
transform-origin:设置元素原点位置;
transform-origin:50% 50% 0;默认值
X轴方向:left | center | right | length |%
Y轴方向:top | center | bottom | length |%
Z轴方向:length
transform-origin:50% 0;代表中心点位置在水平方向50%,垂直方向为0,等价于transform-origin:center top;
一.rorate(旋转)
transform: rorateX(45deg):沿X轴方向旋转45度
ransform: rorateY(45deg):沿Y轴方向旋转45度
ransform: rorateZ(45deg):沿Z轴方向旋转45度
ransform: rorate(45deg):一个参数默认沿Z轴方向旋转45度
单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转
二.scale(缩放)
transform: scaleX(2):水平方向变成原来的两倍
transform: scaleX(0.5):水平方向变成原来的0.5倍
transform: scaleX(-0.5):水平方向变成原来的0.5倍,并且移动的物体反的
transform: scaleY(2):垂直方向变成原来的两倍
transform: scaleZ(2):垂直屏幕方向(Z轴)变成原来的两倍
transform: scale(2):水平垂直方向都变为原来的2倍
transform: scale(0.5,3):水平方向变成原来的0.5倍,垂直方向变为原来的3倍。
三.skew(倾斜)
transform: skewX(30deg):沿X轴倾斜30度
transform: skewY(30deg, 30deg):沿Y轴倾斜30度
transform: skew(30deg, 30deg):沿X和Y轴倾斜30度
四.translate(移动)
transform: translateX(100px):沿水平方向平移100像素;
transform: translateY(100px):沿垂直方向平移100像素;
transform: translateZ(100px):沿Z轴方向平移100像素;
transform: translate(45px, 150px):水平方向上移动45像素,垂直反向上移动150像素的距离。
transform: translate2d(x,y,z):x,y,z代表三个矢量值,沿着这三个方向的合力进行移动。
参数也可以设为百分比。
---------------------