HTML文本怎么垂直写,如何使用CSS跨浏览器绘制垂直文本?

本文介绍了一种使用CSS transform属性来旋转HTML元素的方法。通过不同浏览器前缀的transform属性,可以实现元素的-90度旋转效果。此外,还提供了一个针对IE浏览器的滤镜解决方案。这些技巧有助于开发者在多种浏览器环境中保持网页的一致性和美观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

6d58ba869ac1bbc8ca2ab34fec3a6c63.png

守着星空守着你

使用最新信息(来自CSS技巧)更新了此答案。感谢Matt和Douglas指出过滤器的实现。.rotate {

  -webkit-transform: rotate(-90deg);

  -moz-transform: rotate(-90deg);

  -ms-transform: rotate(-90deg);

  -o-transform: rotate(-90deg);

  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */

  -webkit-transform-origin: 50% 50%;

  -moz-transform-origin: 50% 50%;

  -ms-transform-origin: 50% 50%;

  -o-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}老答案:对于FF 3.5或Safari / Webkit 3.1,请查看:-moz-transform(和-webkit-transform)。IE有一个Matrix过滤器(v5.5 +),但我不确定如何使用它。Opera还没有转换功能。.rot-neg-90 {

  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */

  -moz-transform: rotate(270deg);

  -moz-transform-origin: 50% 50%;

  -webkit-transform: rotate(270deg);

  -webkit-transform-origin: 50% 50%;

  /* IE support too convoluted for the time I've got on my hands... */}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值