1.translate
实现元素位移的效果。
语法
/* X是x轴上移动的位置,Y是y轴上移动的位置 */
transform: translate(X,Y)
/* 只移动x坐标 */
transform: translateX(n)
/* 只移动y坐标 */
transform: translateY(n)
特点
- 不会影响其他元素的位置
- tranlate(m%, n%),里面的参数使用百分号时,移动的距离是根据盒子自身的宽度或高度来进行对比的
div {
width: 200px;
height: 100px;
/* 30%-> 200px*30%=60px */
/* 50%-> 100px*50%=50px */
tranform: translate(30%, 50%);
}
- 对行内元素(例如span)没有效果
2.rotate
实现元素旋转的效果。
语法
/* rotate要跟度数的单位deg */
transform: rotate(度数deg)
特点
- 度数为正值,顺时针旋转;度数为负值,逆时针旋转
- 旋转的中心点默认为盒子的中心
3.scale
使得元素放大和缩小,即进行缩放。
语法
transform: scale(X,Y)
特点
- X和Y写的是数字,不跟单位,是倍数的意思
- 若宽度和高度等比例缩放,仅需写一个参数
- 不会影响其他的盒子,同时可以设置缩放的中心点
4.transform-origin
设置元素转换的中心点
语法
transform-origin: X Y;
特点
- X和Y可以是像素px,也可以是方位名词(top bottom left right center)
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
transform-origin: left bottom;
}
div:hover {
transform: rotate(360deg);
}