css平面變換 transform
平移
CSS語法
- transform:translate(X軸偏移量,Y軸偏移量)
- 取值:可以正負
1.具體的像素單位;
2.百分比(參照盒子自身尺寸) - transform:translateX();
transform:translateY();
如果translate(只有一個值) === translateX()
<style>
.box {
width: 500px;
height: 300px;
border: 4px solid #000;
transform:translate(100px,50px);
/* X軸向右平移100px,Y軸向下平移50px */
}
</style>
旋轉
CSS語法
- transform:rotate(角度deg)
一定要添加deg,否則沒有效果
- 取值:
- 正值:順時針旋轉;
- 負值:逆時針旋轉;
- 細節:先做其它的變換再進行旋轉
旋轉會改變當前元素的坐標軸的方向
<style>
.box {
width: 500px;
height: 300px;
border: 4px solid #000;
transform:rotate(45deg);
/* 順時針旋轉45度 */
}
</style>
縮放
CSS語法
- transform:scale(倍數)
- transform:scale(X倍數,Y倍數)
- 取值:
1.大于1放大;
2.小于1縮小
<style>
.box {
width: 500px;
height: 300px;
border: 4px solid #000;
transform:scale(1.5);
/* 放大1.5倍 */
}
</style>
注意點:行內元素所有的平面轉換是沒有效果的
浙公網安備 33010602011771號