css 旋转：rotate()_CSS学习

来源：网络整理时间：2023/3/4 1:06:06 共 3619 浏览

在CSS3中，我们可以使用transform属性的rotate()方法来实现元素的旋转效果。

语法：

transform: rotate(angle);

说明：

参数angle表示元素相对于中心原点旋转的度数，单位为deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。

举例：

在线测试<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {            width:200px;            height:100px;            border:1px dashed gray;
        }        /*设置当前元素样式*/
        #current
        {            width:200px;            height:100px;            color:white;            background-color: lightskyblue;            transform:rotate(30deg);
        }    </style></head><body>
    <div id="origin">
        <div id="current"></div>
    </div></body></html>

浏览器预览效果如下图所示。

分析：

transform:rotate(30deg);表示元素顺时针旋转30°。如果把30deg改为-30deg，此时浏览器预览效果如下图所示。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css 倾斜：skew()_CSS学习 | ·下一条：纯CCS画三角形箭头_CSS学习