响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-2 CSS3 旋转缩放

代码

html 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 旋转缩放</title>
<style>
div {
    width: 150px;
    height: 150px;
    background-color: #eee;
    transition: all 1s;
}
div:hover {
    /*改变和转换:旋转(360度)缩放(0.5倍)*/
    transform: rotate(360deg) scale(0.5);
}
</style>
</head>

<body>
    <div></div>
</body>
</html>

上述代码中:

第7~12行代码设置了div盒子样式;

第13~16行代码实现当鼠标指针悬停在div盒子上时,让div盒子顺时针旋转360度,并且缩小一半的效果。

运行效果

CSS3动画相关的第二个属性就是 transform,翻译成中文就是"改变和转换"。

CSS3 transform属性允许我们对元素进行旋转、缩放、移动或倾斜,对元素应用2D或3D转换。

相关推荐
IT_陈寒7 小时前
SpringBoot自动配置失效?你可能漏了这个小开关
前端·人工智能·后端
kyriewen7 小时前
我写了1个复盘Skill,和AI协作踩过的坑第二天自动变成护栏
前端·程序员·ai编程
风骏时光牛马7 小时前
AI提示词异常故障复盘分析
前端
SoaringHeart7 小时前
Flutter 进阶:NCanvasImageLoader 让 Canvas 也能画网络图
前端·flutter
计算机魔术师8 小时前
英伟达两个月叫停360亿美元生意:芯片巨头怕了反垄断?
前端
创新技术阁8 小时前
FastapiAdmin 前后端启动全流程详解
前端·后端·fastapi
七牛开发者8 小时前
实测推荐 3 个 Skill,轻松上手 Codex 网页设计与交付流程
前端·javascript·后端
七牛开发者8 小时前
拆解 dsh 系列:从源码和版本变化看 DeepSeek Harness 的设计取舍
前端·javascript·后端
谭光志8 小时前
如何从网站提取设计风格:DOM、计算样式与 DESIGN.md
前端·javascript·agent
深念Y8 小时前
登录日志与管理员审计日志存储决策
前端·arm开发·后端·微服务·云原生·架构