css3 缩放scale()方法
一、scale()方法
缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样,缩放scale()方法也有3种情况:
(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);
1、scaleX(x)
语法:
transform:scaleX(x)
说明:
x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。
2、scaleY(y)
语法:
transform:scaleY(y)
说明:
y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
3、scale(x,y)
语法:
transform:scale(x,y)
说明:
x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。
举例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
在浏览器预览效果如下:
分析:
从上图可以看出,元素沿着X轴方向放大了1.5倍(两个方向同时延伸,整体放大1.5倍)。
1 2 3 |
|
当使用上面代码时,在浏览器预览效果如下:
css3 缩放scale()方法相关推荐
- 2D缩放——scale()方法
缩放--scale() 在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果.缩放,指的是"缩小"和"放大"的意思. sca ...
- html scale缩放,scale()方法缩放当前绘图至更大或更小
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- CSS3 属性 transform 详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用 transform ( 变形 ) 功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一. 旋转 rotate 用法:transform: ...
- css3transform rotate,CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...
- css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <d ...
- 2D转换之缩放scale(CSS3)
2D转换之缩放scale(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- html旋转角度计算,CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
- html scale方法的作用,HTML Canvas scale() 方法
实例 绘制矩形,放大到 200%,然后再次绘制矩形: YourbrowserdoesnotsupporttheHTML5canvastag. JavaScript: var c=document.ge ...
最新文章
- 中国高校毕业生即将加速蓝领化
- 大四上学期的分数和分析感悟
- matplotlib 标签_matplotlib数据可视化基础设置
- 用户登录,token验证开发(含过期时间)
- 全国计算机等级考试题库二级C操作题100套(第44套)
- PostgreSQL 函数调试、诊断、优化 auto_explain
- 华为鸿蒙2.0操作页面,华为鸿蒙2.0开面界面确认,这一变化你可懂
- 看懂Oracle执行计划(转载)
- 依托大数据的财务管理新路径
- 用java程序写日历_用Java和C#写一个日历
- 6.4 tensorflow2实现FNN推荐系统——Python实战(第二篇)
- vue.js 学习笔记3——TypeScript
- 代码设定的按钮与storyboard中的xib页面间的跳转
- 一页纸项目管理及模板下载
- 毕业设计(毕设)目标和要求 (以计算机软件毕业设计为例)
- 改善睡眠的好物分享,提高睡眠质量
- 【云原生】Hadoop HA on k8s 环境部署
- 测试网速_测速软件测试的网速真的准确吗?
- 怎么给PDF添加书签,PDF添加书签的方法
- 数据库dmp文件的导入导出