变形:Transform

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

设置元素的变形,可以先在这个元素上面添加 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 度。

变形:Transform《 Tailwind 样式框架:杂项 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点