目录
- 移动 translate
- 缩放 scale
- 旋转 rotate
- 旋转中心点
- skew倾斜
正文
- 移动 translate
- Transform:translate(x,y); X轴跟Y轴的数值
- Transform: translateX(); 只给一个数值,移动X轴
- Transform: translateY(); 只给一个数值,移动Y轴
注意:常配合过渡效果一起使用
用transform让定位的盒子居中对齐
引进概念:
在transform:translate(x%,y%);中,
百分数是以本元素为标准而不是以父级元素为标准。
之前定位居中方法是: 设置50%的偏移量,然后让居中的盒子往相反的方向移动自身的一半,这个一半是手动计算的固定死的一般,这样不好
新的方法:
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
- 缩放 scale
- scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
- scalex(): 指定对象X轴的(水平方向)缩放
- scaley(): 指定对象Y轴的(垂直方向)缩放
transform: scale(1.2);
- 旋转 rotate
语法:
- Transform:rotate(180deg); 旋转180度
- deg:度数
Backface-visibility: hidden;
隐藏元素的背面,通常用于旋转180度使其不可见
- 旋转中心点
默认的旋转的中心点是图形的中点
可通过:Transform-origin:;指定中心点的位置
取值:
- < percentage >: 用百分比指定坐标值。可以为负值。
- < length >: 用长度值指定坐标值。可以为负值。
- left: 指定原点的横坐标为left
- right: 指定原点的横坐标为right
- top: 指定原点的纵坐标为top
- bottom: 指定原点的纵坐标为bottom
例子:
transform-origin: left top;
transform-origin: 20px 20px; /*水平跟垂直方向*/
- skew倾斜
skew(): 指定对象skew transformation(斜切扭曲)。
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
单位仍然是deg。
对于x轴,正值为左,负值为右。
对于Y轴,正值为上,负值为下。
transform: skew(10deg, 0); /*x轴正的往左边歪*/
transform: skew(-30deg, 0); /*x轴负的往右边倾斜*/
transform: skew(0, -10deg); /*y轴负的方向为向下*/
例子:
原图:
transform: skew(30deg,0);
transform: skew(-30deg,0);
transform: skew(0,30deg);
transform: skew(0,-30deg);