CSS平面转换-旋转

CSS平面转换-旋转

属性

transform: rotate(旋转角度); 单位为deg(度)
技巧

取值正负均可,正则顺时针旋转,负则逆时针旋转。
照片

rotate.png

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDPwfeon-1722616518802)(https://i-blog.csdnimg.cn/direct/a436523c34944d63b8347e331f645a1b.png#pic_center)

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平面转换-旋转</title>
    <style>
        img {
            width: 200px;
            transition: all 2s;
        }
        
        img:hover {
            /* transform: rotate(360deg); */
            transform: rotate(-360deg);
        }

    </style>
</head>
<body>
    <img src="./img/rotate.png" alt="">
</body>
</html>
相关推荐
ikoala5 小时前
用了几周明基 RD280UG,我终于明白程序员为什么需要一台“专用显示器”
前端·后端·程序员
文心快码BaiduComate5 小时前
Comate搭载DeepSeek-V4
前端·后端
豹哥学前端5 小时前
5分钟搞懂事件委托
前端·javascript·面试
Awu12275 小时前
🍎把数学公式搬进 Web 表格:一个 VTable 实战案例
前端
江无行者5 小时前
aly oss技能应用
前端
朝阳395 小时前
单向数据流
前端
小小小小宇5 小时前
H5 嵌入微信 / 支付宝 / 抖音小程序 WebView:调用原生能力完整方案
前端
卷帘依旧5 小时前
React中父子组件生命周期的执行顺序
前端
绝世唐门三哥5 小时前
ES6 --- import/export 全解析
开发语言·前端·javascript
小杍随笔5 小时前
【iNovel 前端架构深度解析:基于 Vue 3 + TypeScript + Tauri 的跨端小说写作工具】
前端·架构·typescript