[分享]css3文字横着排

CSS3是CSS（层叠样式表）的升级版，它提供了更多的样式选择和效果，其中包括了文字横着排的效果。在CSS3中，我们可以使用以下代码将文字横着排： .text { display: inlineblo...

CSS3是CSS（层叠样式表）的升级版，它提供了更多的样式选择和效果，其中包括了文字横着排的效果。

在CSS3中，我们可以使用以下代码将文字横着排：

 .text {
        display: inline-block;
        transform: rotate(-90deg);
        transform-origin: left top 0;
    } 

上述代码中，我们将目标元素（即需要横着排文字的元素）设置为inline-block，这是因为我们需要让元素脱离文档流，并且可以设置宽度和高度。接着我们使用了transform：rotate(-90deg)来将元素旋转90度，这样文字就横着排了。

但这还不够，为了让文字从左往右横着排列，我们还需要设置transform-origin：left top 0，这个属性可以理解为变形的原点，通过设置左上角为原点，我们就可以让文字从左往右横着排列了。

需要注意的是，由于旋转之后元素的宽高被颠倒了，所以还需要相应地调整元素的宽高。

总之，利用CSS3的transform属性，我们可以轻松地实现文字横着排效果，让页面设计更加丰富多彩。