2D转换之旋转——rotate的用法

最新推荐文章于 2025-01-21 22:25:44 发布

尤里卡_1006 (胡健)

最新推荐文章于 2025-01-21 22:25:44 发布

阅读量4.1k

点赞数 1

分类专栏：笔记文章标签： css css3 html5

本文链接：https://blog.youkuaiyun.com/qq_51735681/article/details/114760784

版权

笔记专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何使用CSS3的rotate函数进行2D图像旋转，包括顺时针和逆时针旋转的规则，并通过示例代码展示了如何创建一个鼠标悬停时的360度旋转动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2D转换之旋转——rotate的用法
首先，我们给一张图片作为研究对象，在这里，需要给出图片的储存路径，示例代码如下：

<body>
    <img src="E:\HTML+CSS\案例\media\1006.jpg" alt="">
</body>

其中E:\HTML+CSS\案例\media\1006.jpg是我本地储存该图片的路径。

现在，我们用rotate来进行图片旋转
rotate进行进行旋转的规则的为：
rotate( deg） 若rotate所接( deg）为正值，则顺时针旋转；若rotate所接( deg）为负值，则逆时针旋转。(deg表示角度的单位)。
eg：
假设，我们想使图片顺时针旋转45度，则代码为transform: rotate(45deg);

现在，我们运用rotate做一个鼠标碰到的旋转动画：

<style>
        img： {
            width: 300px;
            border: 5px solid pink;
            transition: all 0.6s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>

备注：

 border: 5px solid pink;

这句代码是为了定义图片外边框的性质，在这里的意思是外边框宽度为5px，边框为实线，颜色为pink色。

 transition: all 0.6s;

这句代码是为了增添动画效果，因为旋转的本体是img代表的图片，所以写道第一个img上（transition做动画过程的规则是：过渡写到本身上，谁做动画给谁加）。在这里地意思是显示动画全过程，全过程总时间0.6秒。

 img:hover {
            transform: rotate(360deg);
        }

这句代码的意思是：当鼠标移动到img所代表的图片时，图片旋转360度。