平移元素的功能類。
Class
|
Properties
|
---|---|
translate-x-0 | --tw-translate-x: 0px; |
translate-x-px | --tw-translate-x: 1px; |
translate-x-0.5 | --tw-translate-x: 0.125rem; |
translate-x-1 | --tw-translate-x: 0.25rem; |
translate-x-1.5 | --tw-translate-x: 0.375rem; |
translate-x-2 | --tw-translate-x: 0.5rem; |
translate-x-2.5 | --tw-translate-x: 0.625rem; |
translate-x-3 | --tw-translate-x: 0.75rem; |
translate-x-3.5 | --tw-translate-x: 0.875rem; |
translate-x-4 | --tw-translate-x: 1rem; |
translate-x-5 | --tw-translate-x: 1.25rem; |
translate-x-6 | --tw-translate-x: 1.5rem; |
translate-x-7 | --tw-translate-x: 1.75rem; |
translate-x-8 | --tw-translate-x: 2rem; |
translate-x-9 | --tw-translate-x: 2.25rem; |
translate-x-10 | --tw-translate-x: 2.5rem; |
translate-x-11 | --tw-translate-x: 2.75rem; |
translate-x-12 | --tw-translate-x: 3rem; |
translate-x-14 | --tw-translate-x: 3.5rem; |
translate-x-16 | --tw-translate-x: 4rem; |
translate-x-20 | --tw-translate-x: 5rem; |
translate-x-24 | --tw-translate-x: 6rem; |
translate-x-28 | --tw-translate-x: 7rem; |
translate-x-32 | --tw-translate-x: 8rem; |
translate-x-36 | --tw-translate-x: 9rem; |
translate-x-40 | --tw-translate-x: 10rem; |
translate-x-44 | --tw-translate-x: 11rem; |
translate-x-48 | --tw-translate-x: 12rem; |
translate-x-52 | --tw-translate-x: 13rem; |
translate-x-56 | --tw-translate-x: 14rem; |
translate-x-60 | --tw-translate-x: 15rem; |
translate-x-64 | --tw-translate-x: 16rem; |
translate-x-72 | --tw-translate-x: 18rem; |
translate-x-80 | --tw-translate-x: 20rem; |
translate-x-96 | --tw-translate-x: 24rem; |
translate-x-1/2 | --tw-translate-x: 50%; |
translate-x-1/3 | --tw-translate-x: 33.333333%; |
translate-x-2/3 | --tw-translate-x: 66.666667%; |
translate-x-1/4 | --tw-translate-x: 25%; |
translate-x-2/4 | --tw-translate-x: 50%; |
translate-x-3/4 | --tw-translate-x: 75%; |
translate-x-full | --tw-translate-x: 100%; |
-translate-x-0 | --tw-translate-x: 0px; |
-translate-x-px | --tw-translate-x: -1px; |
-translate-x-0.5 | --tw-translate-x: -0.125rem; |
-translate-x-1 | --tw-translate-x: -0.25rem; |
-translate-x-1.5 | --tw-translate-x: -0.375rem; |
-translate-x-2 | --tw-translate-x: -0.5rem; |
-translate-x-2.5 | --tw-translate-x: -0.625rem; |
-translate-x-3 | --tw-translate-x: -0.75rem; |
-translate-x-3.5 | --tw-translate-x: -0.875rem; |
-translate-x-4 | --tw-translate-x: -1rem; |
-translate-x-5 | --tw-translate-x: -1.25rem; |
-translate-x-6 | --tw-translate-x: -1.5rem; |
-translate-x-7 | --tw-translate-x: -1.75rem; |
-translate-x-8 | --tw-translate-x: -2rem; |
-translate-x-9 | --tw-translate-x: -2.25rem; |
-translate-x-10 | --tw-translate-x: -2.5rem; |
-translate-x-11 | --tw-translate-x: -2.75rem; |
-translate-x-12 | --tw-translate-x: -3rem; |
-translate-x-14 | --tw-translate-x: -3.5rem; |
-translate-x-16 | --tw-translate-x: -4rem; |
-translate-x-20 | --tw-translate-x: -5rem; |
-translate-x-24 | --tw-translate-x: -6rem; |
-translate-x-28 | --tw-translate-x: -7rem; |
-translate-x-32 | --tw-translate-x: -8rem; |
-translate-x-36 | --tw-translate-x: -9rem; |
-translate-x-40 | --tw-translate-x: -10rem; |
-translate-x-44 | --tw-translate-x: -11rem; |
-translate-x-48 | --tw-translate-x: -12rem; |
-translate-x-52 | --tw-translate-x: -13rem; |
-translate-x-56 | --tw-translate-x: -14rem; |
-translate-x-60 | --tw-translate-x: -15rem; |
-translate-x-64 | --tw-translate-x: -16rem; |
-translate-x-72 | --tw-translate-x: -18rem; |
-translate-x-80 | --tw-translate-x: -20rem; |
-translate-x-96 | --tw-translate-x: -24rem; |
-translate-x-1/2 | --tw-translate-x: -50%; |
-translate-x-1/3 | --tw-translate-x: -33.333333%; |
-translate-x-2/3 | --tw-translate-x: -66.666667%; |
-translate-x-1/4 | --tw-translate-x: -25%; |
-translate-x-2/4 | --tw-translate-x: -50%; |
-translate-x-3/4 | --tw-translate-x: -75%; |
-translate-x-full | --tw-translate-x: -100%; |
translate-y-0 | --tw-translate-y: 0px; |
translate-y-px | --tw-translate-y: 1px; |
translate-y-0.5 | --tw-translate-y: 0.125rem; |
translate-y-1 | --tw-translate-y: 0.25rem; |
translate-y-1.5 | --tw-translate-y: 0.375rem; |
translate-y-2 | --tw-translate-y: 0.5rem; |
translate-y-2.5 | --tw-translate-y: 0.625rem; |
translate-y-3 | --tw-translate-y: 0.75rem; |
translate-y-3.5 | --tw-translate-y: 0.875rem; |
translate-y-4 | --tw-translate-y: 1rem; |
translate-y-5 | --tw-translate-y: 1.25rem; |
translate-y-6 | --tw-translate-y: 1.5rem; |
translate-y-7 | --tw-translate-y: 1.75rem; |
translate-y-8 | --tw-translate-y: 2rem; |
translate-y-9 | --tw-translate-y: 2.25rem; |
translate-y-10 | --tw-translate-y: 2.5rem; |
translate-y-11 | --tw-translate-y: 2.75rem; |
translate-y-12 | --tw-translate-y: 3rem; |
translate-y-14 | --tw-translate-y: 3.5rem; |
translate-y-16 | --tw-translate-y: 4rem; |
translate-y-20 | --tw-translate-y: 5rem; |
translate-y-24 | --tw-translate-y: 6rem; |
translate-y-28 | --tw-translate-y: 7rem; |
translate-y-32 | --tw-translate-y: 8rem; |
translate-y-36 | --tw-translate-y: 9rem; |
translate-y-40 | --tw-translate-y: 10rem; |
translate-y-44 | --tw-translate-y: 11rem; |
translate-y-48 | --tw-translate-y: 12rem; |
translate-y-52 | --tw-translate-y: 13rem; |
translate-y-56 | --tw-translate-y: 14rem; |
translate-y-60 | --tw-translate-y: 15rem; |
translate-y-64 | --tw-translate-y: 16rem; |
translate-y-72 | --tw-translate-y: 18rem; |
translate-y-80 | --tw-translate-y: 20rem; |
translate-y-96 | --tw-translate-y: 24rem; |
translate-y-1/2 | --tw-translate-y: 50%; |
translate-y-1/3 | --tw-translate-y: 33.333333%; |
translate-y-2/3 | --tw-translate-y: 66.666667%; |
translate-y-1/4 | --tw-translate-y: 25%; |
translate-y-2/4 | --tw-translate-y: 50%; |
translate-y-3/4 | --tw-translate-y: 75%; |
translate-y-full | --tw-translate-y: 100%; |
-translate-y-0 | --tw-translate-y: 0px; |
-translate-y-px | --tw-translate-y: -1px; |
-translate-y-0.5 | --tw-translate-y: -0.125rem; |
-translate-y-1 | --tw-translate-y: -0.25rem; |
-translate-y-1.5 | --tw-translate-y: -0.375rem; |
-translate-y-2 | --tw-translate-y: -0.5rem; |
-translate-y-2.5 | --tw-translate-y: -0.625rem; |
-translate-y-3 | --tw-translate-y: -0.75rem; |
-translate-y-3.5 | --tw-translate-y: -0.875rem; |
-translate-y-4 | --tw-translate-y: -1rem; |
-translate-y-5 | --tw-translate-y: -1.25rem; |
-translate-y-6 | --tw-translate-y: -1.5rem; |
-translate-y-7 | --tw-translate-y: -1.75rem; |
-translate-y-8 | --tw-translate-y: -2rem; |
-translate-y-9 | --tw-translate-y: -2.25rem; |
-translate-y-10 | --tw-translate-y: -2.5rem; |
-translate-y-11 | --tw-translate-y: -2.75rem; |
-translate-y-12 | --tw-translate-y: -3rem; |
-translate-y-14 | --tw-translate-y: -3.5rem; |
-translate-y-16 | --tw-translate-y: -4rem; |
-translate-y-20 | --tw-translate-y: -5rem; |
-translate-y-24 | --tw-translate-y: -6rem; |
-translate-y-28 | --tw-translate-y: -7rem; |
-translate-y-32 | --tw-translate-y: -8rem; |
-translate-y-36 | --tw-translate-y: -9rem; |
-translate-y-40 | --tw-translate-y: -10rem; |
-translate-y-44 | --tw-translate-y: -11rem; |
-translate-y-48 | --tw-translate-y: -12rem; |
-translate-y-52 | --tw-translate-y: -13rem; |
-translate-y-56 | --tw-translate-y: -14rem; |
-translate-y-60 | --tw-translate-y: -15rem; |
-translate-y-64 | --tw-translate-y: -16rem; |
-translate-y-72 | --tw-translate-y: -18rem; |
-translate-y-80 | --tw-translate-y: -20rem; |
-translate-y-96 | --tw-translate-y: -24rem; |
-translate-y-1/2 | --tw-translate-y: -50%; |
-translate-y-1/3 | --tw-translate-y: -33.333333%; |
-translate-y-2/3 | --tw-translate-y: -66.666667%; |
-translate-y-1/4 | --tw-translate-y: -25%; |
-translate-y-2/4 | --tw-translate-y: -50%; |
-translate-y-3/4 | --tw-translate-y: -75%; |
-translate-y-full | --tw-translate-y: -100%; |
平移一個(gè)元素時(shí),首先要使用 ?transform
?功能類啟用變換,然后使用 ?translate-x-{amount}
? 和 ?translate-y-{amount}
? 功能類指定平移方向和距離。
<img class="transform translate-y-6 ...">
<img class="transform -translate-y-6 ...">
<img class="transform translate-y-0 ...">
要在特定的斷點(diǎn)處控制元素的變換,可在任何現(xiàn)有的變換功能類中添加 ?{screen}:
? 前綴。例如,使用 ?md:translate-x-8
? 來應(yīng)用 ?translate-x-8
? 功能,只在中等大小的屏幕上使用。
<img class="transform translate-x-2 md:translate-x-8 ...">
關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息,請(qǐng)查看響應(yīng)式設(shè)計(jì)文檔。
默認(rèn)情況下,Tailwind 提供了固定值的平移功能類,它與我們的 ?spacing scale
? 相匹配,以及相對(duì)于元素大小的 50% 和 100% 的平移變化。
您可以在您的 ?tailwind.config.js
? 文件中的 ?theme.spacing
? 或 ?theme.extend.spacing
? 部分自定義全局間距尺度。
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
}
}
}
}
要單獨(dú)定制平移比例,請(qǐng)使用您的 ?tailwind.config.js
? 文件中的 ?theme.translate
? 部分。
// tailwind.config.js
module.exports = {
theme: {
extend: {
translate: {
'1/7': '14.2857143%',
'2/7': '28.5714286%',
'3/7': '42.8571429%',
'4/7': '57.1428571%',
'5/7': '71.4285714%',
'6/7': '85.7142857%',
}
}
}
}
在主題定制文檔中了解更多關(guān)于定制默認(rèn)主題的信息。
默認(rèn)情況下, 針對(duì) translate 功能類,只生成 responsive, hover and focus 變體。
您可以通過修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?translate
?屬性來控制為 translate 功能生成哪些變體。
例如,這個(gè)配置也將生成 active and group-hover 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
translate: ['active', 'group-hover'],
}
}
}
如果您不打算在您的項(xiàng)目中使用 translate 功能,您可以通過在配置文件的 ?corePlugins
?部分將 ?translate
?屬性設(shè)置為 ?false
?來完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
translate: false,
}
}
更多建議: