CSS中可以通過transform屬性實現(xiàn)字體傾斜45度。
.transform { transform: rotate(-45deg); /* 兼容性寫法 */ -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
上述代碼中,transform屬性用于將元素旋轉(zhuǎn)-45度,而-webkit-transform、-ms-transform、-moz-transform和-o-transform則為了兼容不同瀏覽器。
我們可以將該屬性應(yīng)用于文字,從而實現(xiàn)文字傾斜45度:
h1 { transform: rotate(45deg); /* 兼容性寫法 */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
如果需要讓文字傾斜同時保持垂直線性,可以使用transform-origin屬性,該屬性用于設(shè)置旋轉(zhuǎn)基點:
h1 { transform: rotate(45deg); transform-origin: top left; /* 兼容性寫法 */ -webkit-transform: rotate(45deg); -webkit-transform-origin: top left; -ms-transform: rotate(45deg); -ms-transform-origin: top left; -moz-transform: rotate(45deg); -moz-transform-origin: top left; -o-transform: rotate(45deg); -o-transform-origin: top left; }
在上述代碼中,我們設(shè)置了旋轉(zhuǎn)基點為左上角,這樣傾斜后的文字就會以左上角為旋轉(zhuǎn)點,從而使文字保持垂直線性。
總之,使用CSS的transform屬性可以輕松實現(xiàn)文字傾斜45度的效果,而且還可以通過transform-origin屬性調(diào)整傾斜效果。
上一篇css字體華文細黑