设置元素的变形,可以先在这个元素上面添加 tailwind 提供的 transform 这个类,它设置的就是元素的 transform 属性,属性的值是一些变形方式,这些方法里面用了一些变量作为值,默认这些变量的值都是 0 或者 1。
在这个元素上面,再添加一个 rotate-45,它会把 --tw-rotate 这个变量的值设置成 45deg ,也就是 45 度。这样这个元素就会旋转 45度。
在设置元素变形的时候我们还可以设置一下变形的起点位置,比如要把这个变形的起点设置成左上角,可以添加一个 origin-top-left。
它会把 transform-origin 这个属性的值设置成 top left。 要把起点设置成右上角,可以用一个 origin-top-right,这个类会把 transform-origin 设置成 top right。
scale
再试一下缩放变形,在 2 号项目上面,添加一个 transform,再添加一个 scale-125,这样元素就会放大 1.25 倍。
translate
在 3 号项目上面试一下 translate,这种变形可以水平或者垂直移动元素。先添加一个 transform,再添加一个 translate-x-5,这样会让元素水平向右移动 20 像素。
也可以垂直移动元素,添加一个 -translate-y-20,这个类会把 --tw-translate-y 这个变量的值设置成 -5rem, 元素会垂直向上移动 80 像素。
skew
最后再试一下 skew,歪斜,在 5 号项目上面,添加一个 transform,再用一个 skew-y-12 ,这样元素会在 y 轴歪斜 12 度。