顺风 CSS 变换
这个类在顺风 CSS 中接受很多值，其中所有的属性都以类的形式被覆盖。此类用于控制任何元素的转换行为。在 CSS 中，我们可以通过使用 CSS 变换属性来实现。
转换类:
- 变换:要执行任何变换，必须使用这个类。
- 变换-gpu: 通过使用这个类，变换将在 CPU 上的 gpu 上执行，CPU 将以更舒缓的方式执行。
- 变换-无:此类用于停用变换效果。
语法:
<element class="transform-{trans-on}">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Transform Class</b>
<div class="bg-green-300
mx-16
space-y-4
p-2
justify-between
grid grid-rows-1
grid-flow-col">
<div title="bg-left-top"
class="bg-no-repeat
w-16 h-16
my-4 transform skew-y-12"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-left"
class="bg-no-repeat
w-16 h-16
my-4 transform rotate-45"
style=
"background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-left-bottom"
class="bg-no-repeat
w-16 h-16
my-4 transform scale-50"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
<div title="bg-left-bottom"
class="bg-no-repeat
w-16 h-16
my-4 transform translate-x-4 translate-y-4"
style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
</div>
</div>
</body>
</html>
输出:
顺风 CSS 变换类
版权属于：月萌API www.moonapi.com，转载请注明出处
