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 ...
最新文章
- SQL Server中查询所有的表、视图、列和存储过程
- react安装_「React实战」三分钟搭建React开发环境
- Linux安装Redis服务
- linux中ps aux和ps -ef下显示的意义
- [转] Mysql命令基础
- Java对象内存结构
- github上打包的样式为什么在预览的时候,出现404
- linux lvm 磁盘管理
- 从零学习perl语言--perl学习笔记(1)--从基础概念到hello world编写(本文约1000字)
- Report Service中报 RSClientController 未定义
- MySQL引擎innodb和mysum_mysql数据库引擎 MyISAM和 InnoDB区别
- linux命令行中的大括号,linux命令行学习(19):花括号扩展(brace expansion)
- 易打卡模板微信签到打卡小程序源码在线下载
- 票据纸张尺寸对照表_粉丝要求,这期整理一版平面设计必备各种尺寸知识(收藏版))...
- Linux(2019年)-10.11
- 华为:将在员工绩效考核中增加“伙伴满意度”选项;谷歌研究员“走火入魔”,被罚带薪休假;魅族回应被吉利收购 | EA周报...
- 用批处理文件检测u盘并进行复制
- 文本分类之降维技术之特征抽取之SVD矩阵的分解的原理的介绍
- 【Python数据分析学习笔记Day3】(三)数据分析工具pandas,数据清洗,聚类K-Means
- Linux添加IP黑名单