2D转换之旋转

2301_76855186

于 2023-03-06 10:41:48 发布

阅读量46

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/2301_76855186/article/details/129356604

版权

本文介绍了CSS中的transform属性的rotate函数，用于实现元素的旋转效果。内容包括旋转的角度单位（deg和turn），旋转方向以及旋转中心。同时，通过示例展示了如何结合hover和transition创建鼠标悬停时的旋转动画效果。

摘要由CSDN通过智能技术生成

语法：

transform:rotate（度数）

注意：

1.rotate括号里面的单位为deg（度数）或turn(圈)

2.数值角度为正时，是顺时针旋转，负时逆时针旋转

3.默认旋转点为中心点。

玩法：搭配：hover和transtion:all 1s能实现鼠标经过旋转，例：

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            transition: all 3s;
        }
        div:hover{
            transform: rotate(360deg);
        }
    </style>