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>
相关推荐
诸葛老刘9 分钟前
前端 css中的函数
前端·css
谢尔登13 分钟前
通用会话控制方案
前端·网络协议·tcp/ip·react.js·gitlab
惜茶18 分钟前
websocket操作入门
前端·javascript·websocket
摇滚侠1 小时前
Vue 项目实战《尚医通》,获取当前账户就诊人信息并展示出来,笔记42
前端·javascript·vue.js·笔记·html5
han_1 小时前
前端高频面试题之Vue-router篇
前端·vue.js·面试
C.果栗子1 小时前
Blob格式的PDF文件调用打印,浏览器文件打印(兼容)
前端·javascript·pdf
倚肆3 小时前
CSS 选择器空格使用区别详解
前端·css
盼哥PyAI实验室3 小时前
学会给网页穿衣服——学习 CSS 语言
前端·css·学习
我的xiaodoujiao3 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 25--数据驱动--参数化处理 Excel 文件 2
前端·python·学习·测试工具·ui·pytest
岁月宁静4 小时前
从0到1:智能汇 AI 全栈实战,拆解多模态 AI 应用开发全流程
前端·vue.js·node.js