HTML5:七天学会基础动画网页8

2D缩放:scale

scale(x,y) 2D缩放转换,改变元素的宽度和 高度,值为缩放的倍数。

scaleX(n) 2D缩放转换,改变元素的宽度。

scaleY(n) 2D播放转换,改变元素的高度。

跟前面提到的平移同理,后面这两个只能有一个生效,上面的会被下面的覆盖。

例:我们随便给个div

<style>

*{

margin: 0;

padding: 0;

}

.big{

width: 100px;

height: 100px;

background-color: pink;

margin: 40px auto;

}

.big:hover{

transform: scale(1,2)

}

</style>

</head>

<body>

<div class="big">

</div>

鼠标放置后变化

由此我们可知,scale括号内第一个值规定的是x轴的缩放倍数,第二个值规定的是y轴的缩放倍数,当我们只写一个值的时候宽高同时缩放:

.big:hover{

transform: scale(2)

}

我们想缩小时,这里以缩小一半为例:

transform: scale(.5)

只想x/y缩小可以

transform: scaleX(.5)

transform: scaleY(.5)

还可以用它来隐藏元素:transform: scale(0)

缩放以中心为默认原点,可以用跟上一篇旋转相同的方法改变原点:transform-origin: ......

旋转缩放可以组合到一起: transform: scale(2) rotate(45deg) 注意写到相同标签后面不然是不生效的。

2D倾斜:skew---单位是deg(角度)

skew(x-angle,y-angle) 沿x,y轴倾斜。

skewX(angle) 沿X轴倾斜。

skewY(angle) 沿y轴倾斜。

例:

.big:hover{

transform: skew(10deg,20deg)

}

相关推荐
你的牧游哥几秒前
Cursor IDE Rules / Skills / Subagents 前端项目配置全指南
前端·ide
音仔小瓜皮3 分钟前
【Vue】什么时候用Ref?什么时候用shallowRef?
前端·javascript·vue.js
码喽7号5 分钟前
vue学习五:前端路由VueRouter
前端·vue.js·学习
史迪仔01127 分钟前
[QML] 交互事件深度解析:鼠标、键盘、拖拽
前端·c++·qt
ZC跨境爬虫11 分钟前
海南大学交友平台开发实战 day11(实现性别图标渲染与后端数据关联+Debug复盘)
前端·python·sqlite·html·json
GISer_Jing13 分钟前
前端JS面试6大核心考点详解
前端·javascript·面试
ai大模型中转api测评15 分钟前
2026年前端新工具:Gemini 3.1 SVG工作流从Prompt到部署
前端·人工智能·prompt·api
yyuuuzz18 分钟前
独立站搭建:从基础到避坑的实战分享
前端·javascript·github
星空椰42 分钟前
JavaScript 基础入门:从零开始掌握变量与数据类型
开发语言·前端·javascript·ecmascript
千寻简1 小时前
一个让 Claude Code 顺手很多的状态栏插件:claude-hud
前端·后端