css如何设置缩放


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,可以使用transfrom属性的scale()方法设置缩放,语法格式为“transfrom:scale(方向)”。scale()方法用于修改元素的大小,通过向量形式定义的缩放值来放大或缩小元素,同时可在不同方向设置不同缩放值。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

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

语法:

1

2

3

transform: scaleX(x);         /*沿X轴方向缩放*/

transform: scaleY(y);         /*沿Y轴方向缩放*/

transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/

说明:

缩放有3种情况:scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数,参数y表示元素在y轴方向的缩放倍数。

当x或y取值为0~1之间时,元素进行缩小;当x或y取值大于1时,元素进行放大。大家思考一下“倍数”的概念,很快就懂了。

举例:scaleX(x)

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

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

        #origin

        {

            width:200px;

            height:100px;

            border:1px dashed gray;

        }

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

        #current

        {

            width:200px;

            height:100px;

            color:white;

            background-color: rgb(30, 170, 250);

            opacity: 0.6;

            transform:scaleX(1.5);

        }

    </style>

</head>

<body>

    <div id="origin">

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

    </div>

</body>

</html>

浏览器预览效果如下图所示。

KE)A~3CQ{GKXVHST@T{NLSQ.png

分析:

transform:scaleX(1.5);表示元素在x轴方向放大为原来的1.5倍。如果把1.5改为0.5,则元素会在x轴方向缩小为原来的0.5倍,此时预览效果如下图所示。

RH({I95J~@7_TPF})H(6IL8.png

实际上,transform:scaleX(1.5);其实可以等价于transform:scale(1.5, 0);,小伙伴们可以自行测试一下。

举例:scaleY(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

<!DOCTYPE html><html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

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

        #origin

        {

            width:200px;

            height:100px;

            border:1px dashed gray;

        }

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

        #current

        {

            width:200px;

            height:100px;

            color:white;

            background-color: rgb(30, 170, 250);

            opacity: 0.6;

            transform:scaleY(1.5);

        }

    </style>

</head>

<body>

    <div id="origin">

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

    </div>

</body>

</html>

浏览器预览效果如下图所示。

阅读剩余部分

相关阅读 >>

css动画制作――css animate

css的基本语法是什么

css怎么旋转图片

css padding属性怎么用

怎么用css调整背景图的大小

css怎么隐藏滚动条

css 内阴影怎么做

如何新建一个css样式文件

css中字体加粗要怎么做?

如何在css中实现并排生成多行的dt和dd

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...