一、transformtranslate50 0
transformtranslate()是CSS3中的一個2D/3D轉換屬性，它可以將一個元素（或一組元素）沿x軸和y軸移動。translate()接受兩個參數，分別為水平偏移和垂直偏移，單位可以是像素、百分比、em，就像下面這樣：
transform: translate(50px, 0);
這段代碼的意思是，把元素向右移動50px，向下不動。如果水平偏移量是負值，則元素會向左移動。如果垂直偏移量是負值，則元素會向上移動。
當然，我們也可以使用translateX()和translateY()來分別控制橫向和縱向偏移：
transform: translateX(50px);
transform: translateY(50px);
這兩種寫法和使用translate()是等價的。
二、transformtranslate turf
turf是Typography Modifier，是一種在文本排版時用來調整線寬、字間距等文本屬性的CSS屬性。在transformtranslate()函數中，它可以用來控制一個元素相對於自身中心軸的位置，比如這樣：
transform: translate(50%, 50%);
這段代碼的意思是把元素向右移動50%的寬度，向下移動50%的高度。turf對於居中元素、相對定位、垂直對齊非常有用。
三、transformtranslatey rotate
還可以通過transform來同時使用多個transform函數，這樣我們就可以一次性實現多種不同的變換。比如下面這段代碼可以先把元素向右移動50px，再把元素繞x軸旋轉45度：
transform: translateX(50px) rotateX(45deg);
如果我們需要進行多個操作，可以把它們用一個空格隔開，比如下面這段代碼實現了平移、縮放和斜切三個操作：
transform: translate(50px, 100px) scale(2) skewX(30deg);
最後，我們需要強調的是，所有的transform操作都是從元素自身進行變換的。如果我們需要讓元素相對於頁面或其他元素進行變換，我們需要使用position屬性。
原創文章，作者：DDUWW，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/329652.html
微信掃一掃 
支付寶掃一掃 