CSS3中字体旋转是通过<transform>
属性实现的。这个属性可以控制元素的旋转、缩放、倾斜和位移等变换效果。
.example { transform: rotate(30deg); }
在上面的例子中,我们给一个名为.example
的元素添加了一个属性transform: rotate(30deg);
。这会将该元素旋转30度,效果如下:
+------------+ | /| | / | | / | | / | |/ 30° | +------------+
除了旋转,还可以使用下面的值对字体进行<transform>
变换:
.example { transform: scale(1.5); /* 缩放 */ transform: skew(20deg); /* 倾斜 */ transform: translate(50px,20px); /* 平移 */ transform: rotateY(180deg); /* 翻转 */ }
通过使用<transform>
属性,我们可以轻松地对字体进行各种变换,提高了网页设计的灵活性和多样性。