CSS实战篇 - 旋转文字

最新推荐文章于 2024-08-14 18:07:55 发布

原创最新推荐文章于 2024-08-14 18:07:55 发布 · 894 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #transform

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS的transform属性实现文字的旋转效果，包括不同浏览器内核的兼容性写法，如IE、Firefox、Chrome、Safari和Opera等。通过示例代码展示了如何将文字逆时针旋转90度。

在这里插入图片描述

一.效果图

$[外链图片转存失败(img-3WQIqM33-1567050923711)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567045250719.png)]$

二.相关代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>旋转文字</title>

    <style type="text/css">
        div{
            -webkit-transform:rotate(-90deg);
            -moz-transform:rotate(-90deg);
            -o-transform:rotate(-90deg);
            -ms-transform:rotate(-90deg);
            //负数代表逆时针旋转
            transform:rotate(-90deg);
        }
    </style>

</head>
<body>
<div>这是一段旋转过的文字</div>
</body>
</html>