变换
使用变换旋转元素的实用程序。
使用 rotate-*
实用程序来旋转元素。
rotate-0
rotate-45
rotate-90
rotate-180
<img class="rotate-0 ...">
<img class="rotate-45 ...">
<img class="rotate-90 ...">
<img class="rotate-180 ...">
要使用负的旋转值,请在类名前加上破折号以将其转换为负值。
<img class="-rotate-45 ...">
To remove all of the transforms on an element at once, use the transform-none
utility:
<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
<!-- ... -->
</div>
This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.
If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the transform-gpu
utility:
<div class="rotate-45 transform-gpu">
<!-- ... -->
</div>
Use transform-cpu
to force things back to the CPU if you need to undo this conditionally.
Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如,使用 hover:rotate-45
来仅 在 hover应用 rotate-45
.
<div class="hover:rotate-45">
<!-- ... -->
</div>
详细了解, 请参考 Hover, Focus, & Other States 文档.
您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:rotate-45
来应用 rotate-45
程序,适用于中等屏幕尺寸及以上。
<div class="md:rotate-45">
<!-- ... -->
</div>
默认情况下,Tailwind 包含一些通用的 rotate
实用程序。您可以通过在 tailwind.config.js
文件中编辑 theme.rotate
或 theme.extend.rotate
来自定义这些值。
module.exports = {
theme: {
extend: {
rotate: {
'17': '17deg',
}
}
}
}
在 theme customization 文档中了解有关自定义默认主题的更多信息。
如果您需要使用一次性的 rotate
值,而该值没有必要包含在主题中,请使用方括号动态生成属性,使用任意值。
<div class="rotate-[17deg]">
<!-- ... -->
</div>
进一步了解,请参考 任意值 文档.