css3 字不旋转

CSS3是一种优秀的前端开发技术,它可以实现许多有趣的效果,比如:字体旋转。但是你可能没有想到的是,CSS3中同样可以实现字不旋转的效果



不旋转的字

css3 字不旋转

上面的代码使用了CSS3中的writing-mode属性,该属性能够指定文本的方向,在这里我们使用了vertical-lr,表示竖向排列并且从右至左。接着,我们使用transform属性将字体旋转-180度,就实现了字不旋转的效果

需要注意的是,另外一个值vertical-rl表示竖向排列并且从左至右,而horizontal-tb表示横向排列并且从上至下。你可以根据实际需要进行选择。

总之,CSS3是一个十分强大的前端开发技术,可以实现非常丰富的效果。相信通过不断学习、不断尝试,我们可以开发出更加出色的网站和应用。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效