CSS中的平移即為移動HTML元素的位置。通過CSS的transform屬性可以實現元素的平移。transform屬性需要兩個關鍵字,第一個是transform-origin,用于設置元素的旋轉中心點。第二個是translate,用于設置元素的平移。
transform: translate(50px, 100px);
上面的代碼即為將元素向右移動50px,向下移動100px。也可以只設置一個方向的平移:
transform:translateX(50px); /* 向右移動50px */ transform:translateY(-50px); /* 向上移動50px */
同時也可以使用百分比進行平移:
transform:translate(50%, 100%);
上面的代碼即為將元素向右平移50%的寬度,向下平移100%的高度。
除了使用transform屬性,也可以使用position屬性對元素進行移動。position屬性有三個取值:static、relative、absolute。其中,relative可以使用top、bottom、left、right屬性對元素進行平移。
position: relative; left: 50px; top: 100px;
上面的代碼即為將元素向右移動50px,向下移動100px。同樣可以只設置一個方向的位置:
position: relative; left: 50px; /* 向右移動50px */ top: -50px; /* 向上移動50px */
以上就是CSS中平移的實現方法,不同的情況可以選擇不同的方法進行實現。
下一篇css中的平移元素