是否可以在网页中以一定角度显示文本?
我想知道是否可以在网页中以一定角度(例如 40 度)创建文本。如果可能的话,我该怎么做?
编辑:最后,我决定采用 Mathias Bynens 的答案。
I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?
EDIT: Finally, I decided to go with Mathias Bynens's answer.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用CSS3转换:
IE确实支持
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
,其中rotation属性接受四个值之一:0
、< code>1、2
或3
分别将元素旋转 0、90、180 或 270 度。不过它是一个过滤器,所以我不建议使用它。Use CSS3 transforms:
IE does support
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
, where the rotation property accepts one of four values:0
,1
,2
, or3
which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.要添加到 Mathias 的答案,您也可以在 IE 中旋转文本: http://snook .ca/archives/html_and_css/css-text-rotation
但是,您必须使用 90° 的倍数。
除此之外,您还可以利用 SVG/VML 来旋转文本。例如,看看这个页面: http://raphaeljs.com/text-rotation.html
它使用 RaphaelJS 库进行跨浏览器文本旋转,无需图像。
To add to Mathias' answer, you can rotate text in IE, too: http://snook.ca/archives/html_and_css/css-text-rotation
However, you are bound to multiples of 90°.
Apart from that you could utilize SVG/VML for rotated text. Look, for example, at this page: http://raphaeljs.com/text-rotation.html
It uses the RaphaelJS library for cross browser text rotation without images.
Mathias 的回答是正确的,但为了也支持 IE,你可以使用他们的过滤器:
那么 IE 也会得到支持:)
Mathias is right in his answer, but to also support IE you can use their filter:
Then IE will be supported too :)