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

相关推荐
老毛肚14 小时前
jeecgboot TS + Vue 模板化 03
前端·javascript·vue.js
下北沢美食家14 小时前
SSE 入门
前端
云计算磊哥@14 小时前
运维开发宝典023-WEB网站服务
运维·前端·运维开发
加点油。。。。14 小时前
【1.Obsidian渲染html文件】
前端·html·obsidian
ZFSS14 小时前
BYOK(自带密钥)使用指南
运维·服务器·前端·人工智能·midjourney
AI_零食14 小时前
呼吸灯 - 通过鸿蒙PC Electron框架技术完成-在焦虑时代守护每一次呼吸的数字禅修
前端·javascript·华为·electron·前端框架·鸿蒙
佛山个人技术开发15 小时前
高端旅游风景区酒店民宿网站模板 自适应宽屏文旅酒店源码
前端·html5·旅游
㳺三才人子15 小时前
初探 Flask-WTF
后端·python·flask·html5
ZC跨境爬虫15 小时前
跟着 MDN 学JavaScript day_5:技能测试——变量实战
java·开发语言·前端·javascript
pan_junbiao15 小时前
Whistle 抓包工具的安装与使用
前端·测试工具·压力测试·抓包