JavaScript案例——网页特效之旋转

最新推荐文章于 2025-07-22 15:38:24 发布

Cl_Daisy

最新推荐文章于 2025-07-22 15:38:24 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： javascript css3

本文链接：https://blog.youkuaiyun.com/Cl_Daisy/article/details/78230029

这篇博客探讨了如何使用JavaScript与CSS3的transform和rotate方法在网页上创建旋转特效。虽然IE浏览器不支持CSS3，但该方法在其他浏览器中可以实现元素的2D旋转效果。rotate()函数通过指定弧度来调整元素的旋转角度，正值表示顺时针，负值表示逆时针。

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

ps：这个旋转不能再IE浏览器中正常打开，因为IE浏览器不兼容CSS3

这里使用的重点属性是transform和rotate方法

定义：
transform属性是向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate() 方法旋转画布的坐标系统。
语法
rotate(angle)
注：angle 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转
文中用的deg和angle一样
-

关于rotate说明

rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转元素本身。注意，这个角度是用弧度指定的。
如果要把角度转换为弧度，请乘以 Math.PI 并除以 180。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #body{
                position: absolute;
                width: 300px;
                height: 300px;
                top: 200px;
                l