CSS3 平行移動是指元素在不改變其它屬性值的情況下,在頁面上沿著水平或垂直方向移動。在 CSS3 中,我們可以使用 translate() 函數實現平移效果。以下是實現平移效果的示例代碼:
/* 平移元素 50 像素向右移動,100 像素向下移動 */ div { transform: translate(50px, 100px); }
上述代碼中,我們選擇了一個 div 元素,并使用 transform 屬性和 translate() 函數來實現平移效果。translate() 函數接受兩個參數:第一個參數是水平方向移動的像素值,第二個參數是垂直方向移動的像素值。
如果我們只想水平或垂直移動元素,我們可以將其中一個參數設置為 0。下面是僅在水平方向上平移的示例代碼:
/* 平移元素 50 像素向右移動 */ div { transform: translateX(50px); }
上述代碼中,我們使用了 translateX() 函數來指定元素在水平方向上平移 50 像素。
同樣的,如果我們只想在垂直方向上移動元素,我們可以使用 translateY() 函數。以下是示例代碼:
/* 平移元素 100 像素向下移動 */ div { transform: translateY(100px); }
總的來說,CSS3 平行移動可以幫助我們實現許多有趣的效果,如動畫、視差滾動等。我們只需要熟練掌握 translate()、translateX()、translateY() 函數的使用,就能輕松實現這些效果。