2D缩放——scale()方法_sacle缩放速度-程序员宅基地

技术标签: css  HTML  html  css3  

缩放——scale()

  • 在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。
  • scale()方法跟translate()方法类似,缩放也有3种情况:scaleX()、scaleY()、scale(),参数x表示元素在x轴方向的缩放倍数,参数y表示元素在y轴方向的缩放倍数。

有以下几种情况:

  1. transform: scale(x, y);里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍
  2. transform: scale(2, 1);修改了宽度为原来的2倍 高度 不变
  3. transform: scale(2);等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是 宽度修改了2倍,高度默认和第一个参数一样
  4. transform: scale(0.5, 0.5); transform: scale(0.5); 我们可以进行缩小 小于1 就是缩放
  5. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点

例子

...
.demo1 {
    
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        .demo2 {
    
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 10px auto;
        }
        
        .demo3 {
    
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 10px auto;
        }
        
        .demo1:hover {
    
            /* 等比例放大两倍 */
            transform: scale(2);
        }
        
        .demo2:hover {
    
            /* 等比例缩小1/2倍 */
            transform: scale(0.5);
        }
...
<body>
    <div class="demo1">我是可以放大2倍</div>
    <div class="demo2">我是可以缩小1/2倍</div>
    <div class="demo3">我没有变化</div>
</body>

输出结果

缩小了.png
放大了.png

如果对你有所帮助,欢迎点赞收藏哦,共同进步哦!!

我开通了博客,欢迎点我前去参观哦!!!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46032713/article/details/119618596

智能推荐

openssl-3.0.0-alpha9编译_all lines in c:/openssl-3.0.9/openssl-3.0.9/extern-程序员宅基地

文章浏览阅读3.5k次。这个通讯传输加密工具,非常厉害。configure 如下之后make和make install就可以了。多谢,亲爱的美美。_all lines in c:/openssl-3.0.9/openssl-3.0.9/external/perl/modules.txt must b

python 写入csv文件固定列_python对csv文件追加写入列的方法-程序员宅基地

文章浏览阅读3.4k次。python对csv文件追加写入列,具体内容如下所示:原始数据[外链图片转存失败(img-zQSQWAyQ-1563597916666)(C:UsersinnduceAppDataRoamingTyporatypora-user-images1557663419920.png)]import pandas as pdimport numpy as npdata = pd.read_csv(r'平均..._numpy写入csv文件一列

2018年世界计算机超算大赛,在世界大学生超级计算机竞赛(ASC18)总决赛中 青海大学超算团队成功获得ASC竞赛全球一等奖...-程序员宅基地

文章浏览阅读216次。5月9日晚,2018ASC世界大学生超级计算机竞赛(ASC18)总决赛在南昌大学落下帷幕,清华大学成功卫冕总冠军,上海科技大学揽获亚军和e Prize计算挑战奖两项大奖,台湾清华大学获得最高计算性能奖。青海大学在此次比赛中取得了突破性的成绩,HPL基准测试性能仅次于台湾清华大学,HPCG性能仅次于清华大学,最终获全球一等奖,展现出优秀的超算系统与应用理解能力以及出色的性能优化能力。ASC18由亚洲..._青海大学超级计算机

asp webForm 三层框架的简单实例(一)未完待续--_asp net web form应用 三层架构部署-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏23次。本文通过一个简单的登录实例,介绍了基本的WebForm开发方式的MVC三层框架方式。本文,是个人作为一个初学者,对webform三层框架的总结,配有相应的源代码,希望对同样迷惑的你有所帮助,如果有不对之处敬请批评指导。_asp net web form应用 三层架构部署

人脸比对(1:N)_1:n人脸检索 学术-程序员宅基地

文章浏览阅读2.9w次,点赞12次,收藏81次。第1章 前言设计出人脸1:N,随着N的增大准确率降低最小的解决方案具有很强的现实意义。人脸1:N的框架大致分为:人脸检测、人脸对齐、人脸映射与人脸识别LOSS的设计,结构如下图所示:图1:人脸1:N的主要框架人脸1:N在学术界有着广泛的研究,对于人脸检测与人脸对齐(MTCNN、TCDCN等)在业界已经有较好的效果,目前的主要性能提升有:DeepFace、DeepID,框架为CNN ..._1:n人脸检索 学术

java语言当中的标识符_java语言的标识符-程序员宅基地

文章浏览阅读458次。关于java语言当中的标识符1、什么是标识符?- 在java源程序当中凡是程序员有权利自己命名的单词都是标识符-标识符可以表示什么元素?*类名*方法名*变量名*接口名*常量名......2、标识符命名规则?【不按照这个规则来,编译器会报错,这是语法】*只能由“数字、字母、下划线_、美元符号$”组成,不能含有其他符号*不能数字开头*严格区分大小写*关键字无长度限制,但是最好不要太长3、标识符命名规范?【只是一种规范,不属于语法,不遵守规范编译器不会报_java语言的标识符

随便推点

vue element-ui 表格的分页功能_elementui table 分页-程序员宅基地

文章浏览阅读3.5k次,点赞3次,收藏7次。vue element-ui 表格的分页功能_elementui table 分页

用OpenInventor实现的NeHe OpenGL教程-第三十课-程序员宅基地

文章浏览阅读65次。用OpenInventor实现的NeHe OpenGL教程-第三十课 NeHe教程在这节课介绍了碰撞检测。碰撞检测是一种比较复杂的技术。NeHe教程只是检测平面、球体、圆柱体等这些规则物体之间的碰撞检测。OpenInventor提供了任意形状物体之间的碰撞检测,当然这样的碰撞检测需要更多的计算时间。碰撞检测的算法在NeHe的教程中已经做了详尽的解释,我们就不再赘述了。程序的..._openinventor 火焰效果

视频播放加密功能的演示_视频分段加密播放实现-程序员宅基地

文章浏览阅读1.3k次。视频播放密码/设定观看密码功能,对视频文件设置观看权限,划分学员和游客,学员输入正确的密码即可观看视频。_视频分段加密播放实现

vue中用computed简单实现数据的双向绑定(getter 和 setter)_vue computed绑定表单值-程序员宅基地

文章浏览阅读6.2k次,点赞3次,收藏9次。vue是号称实现了数据双向绑定的框架,但事实上在日常开发中我们用的最多的就是 v-model 将data(vue实例中)里面的是数据和view 相关联,实现 data 更新,view自动刷新的效果。但是,在移动成都上来说,这种数据双向绑定的效果并不是特别的明显。今天,我用输入框和 computed 配置来实现一个比较明显的数据双向绑定的效果:先来看一下最终的效果:主要实现的效果:..._vue computed绑定表单值

联想微型计算机C470拆装,联想C470一体机一键U盘重装系统教程图解-程序员宅基地

文章浏览阅读3.7k次。联想C470一体机造型小巧,外观唯美时尚,易于摆放并能脱离冗杂线缆的束缚。该机是一款非常时尚的家用一体电脑,采用21.5英寸触控屏幕,全高清显示相当精细。无论是学习办公,还是家庭娱乐都能够满足用户的需求。下面给大家介绍联想C470一体机一键U盘重装系统教程图解,教大家一体机怎么装系统。相关推荐:联想C470一体机怎么进入bios设置u盘启动准备一个u盘,再下载U盘装机大师启动盘制作工具,把其做成U..._联想c470一体机拆机图解

简单的MiniGUI软键盘-程序员宅基地

文章浏览阅读1k次。由于已经购买mGi模块,故而自己写的这个用不着了,留在这里做个记念吧。以下是关键代码,其实思想蛮简单,就是发送消息给输入法窗口就万事大吉了。但是有个最重要的bug就是中文输入无法选择所有的汉字,估计要改一下minigui输入法的源码,mGi的软键盘是利用了两行。示例图如下,很简陋,如果经过美化,可以做到很漂亮。 #include "common.h"#define ITEM_N_minigui软键盘

推荐文章

热门文章

相关标签