css如何设置缩放

PHP中文网 JavaScript

当前第2页 返回上一页

CRA1CF3Q5YNTZF_BOD)2UO6.png

分析：

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

1Z`CW{%TX~L)_Z]13{QDVRC.png

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

举例：scale(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

<!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:scale(1.2, 1.5);

        }

    </style>

</head>

<body>

    <div id="origin">

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

    </div>

</body>

</html>

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

C7M4ED]%3~MGH2{78Q4YAJ6.png

分析：

transform:scale(1.2, 1.5);表示元素在x轴和y轴两个方向上同时放大，x轴方向放大为原来的1.2倍，y轴方向放大为原来的1.5倍。实际上，transform:scale(1.2, 1.5);其实可以等价于以下代码：

1

2

transform:scaleX(1.2);

transform:scaleY(1.5);

推荐学习：css视频教程

以上就是css如何设置缩放的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css最大的优点是什么

css实现div一直旋转的方法

css实现动画性能优化

css代码规范分享

css中如何设置背景图像

css animation-direction属性怎么用

css是框架吗

css怎么设置在底部

css字体溢出怎么隐藏

css怎么设置a标签不可点击

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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