CSS3中的下垂效果是指將元素在豎直方向向下移動一定距離的效果,通俗地理解就是“垂下來”的效果。
在CSS3中實現下垂效果非常簡單,只需要使用transform: translateY()
屬性即可實現。該屬性允許你指定豎直方向上元素的移動距離。使用此屬性時,需要注意以下幾點:
/* 將元素向下移動20px */ .down { transform: translateY(20px); }
1. 該屬性只有在元素absolute、fixed等有定位屬性時才能生效;
2. 正值將元素向下移動,負值將元素向上移動;
3. 如果需要實現相對原來位置下垂,只需使用相對移動的值即可;
4.translateY()
可以與其他屬性組合使用,比如旋轉、傾斜等,實現更加酷炫的效果。