响应式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转换。

相关推荐
张鑫旭8 小时前
都AI时代了,我为何还在学习前端基础知识?
前端
swipe8 小时前
正则表达式入门到进阶:从表单校验到手写模板引擎
前端·javascript·面试
阿祖zu8 小时前
别再优化 RAG 了,适配 Agent 的 LLM Wiki 知识库理念
前端·后端·aigc
kyriewen8 小时前
前端错误监控最全指南:捕获 JS 异常、Promise 拒绝、资源加载失败,附上报代码
前端·javascript·监控
狗哥哥9 小时前
船队运营可视化技术方案
前端
大家的林语冰9 小时前
ESLint 近期动态大全,新版本正式发布,antfu 大佬推荐的插件也更新了!
前端·javascript·前端工程化
只会cv的前端攻城狮9 小时前
DSL 领域模型架构设计:消灭 CRUD 重复工作
前端·架构
码事漫谈9 小时前
时序数据库2026盘点:国产数据库如何以“融合多模”走出差异化之路?
前端·后端
道友可好9 小时前
让 AI 自己验收,等于让学生自己批卷
前端·人工智能·后端
yingyima10 小时前
Go 语言正则表达式速查手册:30 分钟掌握核心语法与实战技巧
前端