一、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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CSS3缩放scale()方法</title>

    <style type="text/css">

        /*设置原始元素样式*/

        #origin

        {

            margin:100px auto;/*水平居中*/

            width:200px;

            height:100px;

            border:1px dashed gray;

        }

        /*设置当前元素样式*/

        #current

        {

            width:200px;

            height:100px;

            color:white;

            background-color: #3EDFF4;

            text-align:center;

            transform:scaleX(1.5);

            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/

            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/

        }

    </style>

</head>

<body>

    <div id="origin">

        <div id="current"></div>

    </div>

</body>

</html>

在浏览器预览效果如下:

分析:

从上图可以看出,元素沿着X轴方向放大了1.5倍(两个方向同时延伸,整体放大1.5倍)。

1

2

3

transform:scaleY (1.5);

-webkit-transform:scaleY(1.5);  /*兼容-webkit-引擎浏览器*/

-moz-transform:scaleY(1.5);     /*兼容-moz-引擎浏览器*/

当使用上面代码时,在浏览器预览效果如下:

css3 缩放scale()方法相关推荐

  1. 2D缩放——scale()方法

    缩放--scale() 在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果.缩放,指的是"缩小"和"放大"的意思. sca ...

  2. html scale缩放,scale()方法缩放当前绘图至更大或更小

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  4. CSS3 属性 transform 详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    在CSS3中,可以利用 transform ( 变形 ) 功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一. 旋转 rotate 用法:transform: ...

  5. css3transform rotate,CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...

    CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...

  6. css3缩放 transform: scale() 使用缩放之后顶点对齐问题

    css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 <d ...

  7. 2D转换之缩放scale(CSS3)

    2D转换之缩放scale(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...

  8. html旋转角度计算,CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园...

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...

  9. html scale方法的作用,HTML Canvas scale() 方法

    实例 绘制矩形,放大到 200%,然后再次绘制矩形: YourbrowserdoesnotsupporttheHTML5canvastag. JavaScript: var c=document.ge ...

最新文章

  1. 中国高校毕业生即将加速蓝领化
  2. 大四上学期的分数和分析感悟
  3. matplotlib 标签_matplotlib数据可视化基础设置
  4. 用户登录,token验证开发(含过期时间)
  5. 全国计算机等级考试题库二级C操作题100套(第44套)
  6. PostgreSQL 函数调试、诊断、优化 auto_explain
  7. 华为鸿蒙2.0操作页面,华为鸿蒙2.0开面界面确认,这一变化你可懂
  8. 看懂Oracle执行计划(转载)
  9. 依托大数据的财务管理新路径
  10. 用java程序写日历_用Java和C#写一个日历
  11. 6.4 tensorflow2实现FNN推荐系统——Python实战(第二篇)
  12. vue.js 学习笔记3——TypeScript
  13. 代码设定的按钮与storyboard中的xib页面间的跳转
  14. 一页纸项目管理及模板下载
  15. 毕业设计(毕设)目标和要求 (以计算机软件毕业设计为例)
  16. 改善睡眠的好物分享,提高睡眠质量
  17. 【云原生】Hadoop HA on k8s 环境部署
  18. 测试网速_测速软件测试的网速真的准确吗?
  19. 怎么给PDF添加书签,PDF添加书签的方法
  20. 数据库dmp文件的导入导出

热门文章

  1. 凛冬至,这一杯互联网咖啡能热多久?
  2. 计算机毕业设计之java+ssm企业员工考勤系统
  3. 黑客暗战 —— 黑帽、白帽、灰帽背后的隐秘世界
  4. wo-27s管理员账户和密码_某数据监测与分析系统可被撞库出登录密码
  5. Python强大的自省机制
  6. 【Multisim仿真】运放电路:反相比例运算电路
  7. 关于vs2022设置默认浏览器
  8. 《团》里男人是否可嫁的汉?
  9. 冒险岛2无限服务器断开,冒险岛2无限龙无限命版
  10. ixgbe 如何开启vf