CSS函数:scale、scale3d函数的使用

CSS函数scale()主要是为了实现元素的放大和缩小效果,使用的是元素的变换效果。使用的是元素的转换属性:transform的,该函数可以实现指定X轴和Y轴的放大、缩小效果。除此之外,我们还可以通过如下两种方式实现指定方向的转换:

  • scalex():指定X轴方向的元素放大或者缩小
  • scaley():指定Y轴方法的元素放大或缩小
  • scalez():指定Z轴方法的元素放大或缩小
  • scale3d():定义了一个在 3D 空间中调整元素放大或缩小

scale函数

scale() CSS 函数定义了一个在 2D 平面上调整元素大小的变换。因为缩放量是由向量定义的,所以它可以在不同的比例下调整水平和垂直维度的大小。代码格式如下:

scale(sx)
scale(sx, sy)

代码示例如下:

<style>.container .scale > div > .result {transform: scale(.8,2);}
</style><div class="scale"><h3>scale函数使用</h3><div><div class="original ">original container</div><div class="result">scale(0.8,2) container</div></div></div>

显示结果:

scale3d函数

scale3d() CSS 函数定义了一个在 3D 空间中调整元素大小的转换。因为缩放量是由向量定义的,所以它可以在不同的比例下调整不同维度的大小。语法格式如下:

scale3d(sx, sy, sz)
  • sx:数字类型,表示缩放向量的横坐标。
  • sy:数字类型,表示缩放向量的纵坐标。
  • sz:数字类型,表示缩放向量的 z 分量的数字。

代码示例:

<style>        
.container .scale3d {margin-top: 80px;
}.container .scale3d>div>div {display: inline-block;padding: 30px;background-color: aqua;
}.container .scale3d>div>.result {transform: perspective(300px) scale3d(2, 0.8, 0.4) translateZ(100px);transform-origin: left;background-color: red;margin-left: 60px;
}
</style><div class="scale3d"><h3>scale3d函数使用</h3><div><div class="original ">
Original Text
</div><div class="result">
scale3d Text
</div></div>
</div>

显示结果:

scalex函数

scaleX() CSS 函数定义了一个沿 x 轴(水平)调整元素大小的转换。它用常数因子修改每个元素点的横坐标,除非比例因子为 1,在这种情况下函数是恒等变换。缩放不是各向同性的,单元的角度不守恒。 scaleX(-1) 定义轴对称,垂直轴穿过原点(由 transform-origin 属性指定)。scaleX(sx) 等价于 scale(sx, 1) 或 scale3d(sx, 1, 1)

代码格式如下:

<style>
.container .scalex>div>div {display: inline-block;padding: 30px;background-color: aqua;
}
.container .scalex>div>.result {background-color: red;transform: scaleX(1.6);transform-origin:left ;
}
</style><div class="scalex"><h3>scalex函数使用</h3><div><div class="original "> Original Text</div><div class="result">scalex Text</div></div>
</div>

显示结果:

scaley函数

scaleY() CSS 函数定义了一个沿 y 轴(垂直)调整元素大小的转换。它通过常数因子修改每个元素点的纵坐标,除非比例因子为 1,在这种情况下函数是恒等变换。缩放不是各向同性的,单元的角度不守恒。 scaleY(-1) 定义轴对称,水平轴穿过原点(由 transform-origin 属性指定)。

代码格式如下:

<style>.container .scaley>div>div {display: inline-block;padding: 30px;background-color: aqua;}.container .scaley>div>.result {background-color: red;transform: scaleY(1.6);transform-origin:left ;}
</style><div class="scaley"><h3>scaley函数使用</h3><div><div class="original "> Original Text</div><div class="result">scaley Text</div></div></div>

显示结果:

scalez函数

scaleZ() CSS 函数定义了一个沿 z 轴调整元素大小的转换。此缩放变换通过常数因子修改每个元素点的 坐标,除非缩放因子为 1,在这种情况下,函数是恒等变换。缩放不是各向同性的,单元的角度不守恒。 scaleZ(-1) 定义轴对称,z 轴穿过原点(由 transform-origin 属性指定)。

示例代码:

<style>.container .scalez>div>div {display: inline-block;padding: 30px;background-color: aqua;}.container .scalez>div>.result {background-color: red;transform: perspective(400px) scaleZ(2) translateZ(-100px);transform-origin:left ;}
</style><div class="scalez"><h3>scalez函数使用</h3><div><div class="original "> Original Text</div><div class="result">scalez Text</div></div></div>

显示结果:

示例代码:CSS scale函数使用示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java】国密SM3/SM4(附工具类)

目录 前言国密算法SM1对称加密算法SM1算法的基本原理SM1算法的应用场景SM1算法的优势代码示例 SM2非对称加密算法SM2算法的基本原理SM2算法的应用场景SM2算法的优势代码示例依赖代码 SM3杂凑算法SM4分组密码算法 SM3、SM4工具类示例依赖SM3工具类SM4工具类CBCECB 前言 目前形式…

[论文笔记]Mixtral of Experts

引言 今天带来大名鼎鼎的Mixtral of Experts的论文笔记&#xff0c;即Mixtral-8x7B。 作者提出了Mixtral 8x7B&#xff0c;一种稀疏专家混合(Sparse Mixture of Experts&#xff0c;SMoE)语言模型。Mixtral与Mistral 7B具有相同的架构&#xff0c;不同之处在于每个层由8个前馈…

SpringCache 缓存 - @Cacheable、@CacheEvict、@CachePut、@Caching、CacheConfig 以及优劣分析

目录 SpringCache 缓存 环境配置 1&#xff09;依赖如下 2&#xff09;配置文件 3&#xff09;设置缓存的 value 序列化为 JSON 格式 4&#xff09;EnableCaching 实战开发 Cacheable CacheEvict CachePut Caching CacheConfig SpringCache 的优势和劣势 读操作…

Flask 实现增改及分页查询的完整 Demo

Flask 实现增改及分页查询的完整 Demo 简介 本文将通过一个 Flask Demo 来展示如何使用 Flask 框架实现 RESTful API&#xff0c;包括增加、修改用户信息以及分页查询功能。我们将使用 Flask 的扩展 SQLAlchemy 来处理数据库操作。 环境准备 首先&#xff0c;确保你已安装 …

【Android面试题】请你分别采用递归和非递归对二叉树进行遍历?

请你分别采用递归和非递归对二叉树进行遍历? 这道题想考察什么? 1、二叉树的基本原理和遍历的方法? 考察的知识点 二叉树遍历的基本概念、二叉树的基本原理 考生如何回答 二叉树的基本概念 当然可以! 二叉树是一种常见的数据结构,它由一组称为节点的元素构成。每个…

地平线x3派开启core文件存储奔溃日志

开发环境 ubuntu22 ros humble c11 程序奔溃后core文件存储设置 1. 确保系统允许生成core文件 首先&#xff0c;检查和设置系统的core文件生成限制&#xff1a; 检查当前core文件大小限制 使用以下命令检查当前core文件大小限制&#xff1a; ulimit -c如果输出为 0&am…

reduce过滤递归符合条件的数据

图片展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head><…

Python 实现乘数加密法

乘数加密是简单代替密码的一种。乘数加密法脱胎于凯撒加密法,加密和解密符号设计把他们转换成数字,加上或者减去密钥,然后把新的数字转换回符号,当我们把加减密钥变成乘以密钥,就是乘法加密法。有关凯撒加密法可以看之前的文章《Python实现凯撒加解密》。 加密过程 乘数加…

力扣hot100:25. K 个一组翻转链表

LeetCode&#xff1a;25. K 个一组翻转链表 这个题很像24. 两两交换链表中的节点 和 206. 反转链表 的合并体。 在力扣hot100&#xff1a;24. 两两交换链表中的节点中我们使用递归来实现这个问题是很方便的&#xff0c;使用迭代在k个结点一组时就不太好使了&#xff0c;我们可…

【攻击绕过】IP速率限制绕过

【攻击绕过】IP速率限制绕过 1.探测对应功能的API接口2.在代码或参数中插入空白字符3.通过标头操纵IP来源4.修改其他标头5.利用代理网络6.利用 API 网关行为 1.探测对应功能的API接口 应尝试对目标功能的API接口执行暴力攻击&#xff0c;例如/api/v3/sign-up&#xff0c;包括/…

鸿蒙轻内核M核源码分析系列六 任务及任务调度(3)任务调度模块

调度&#xff0c;Schedule也称为Dispatch&#xff0c;是操作系统的一个重要模块&#xff0c;它负责选择系统要处理的下一个任务。调度模块需要协调处于就绪状态的任务对资源的竞争&#xff0c;按优先级策略从就绪队列中获取高优先级的任务&#xff0c;给予资源使用权。本文我们…

nc翻译公式注意事项

nc翻译公式注意事项 翻译3个及以上条件&#xff08;里面加引号的是表名和表中字段&#xff0c;没加引号的是VO中的字段&#xff0c;没加引号的不能是getcolvalue后的字段&#xff09; "pzh->getColValueMore(\"voucherref_view\",\"pk_voucher\"…

关于map并发读写问题的解决方案考虑小计

叠甲&#xff1a;未详细看底层实现&#xff0c;只是大概看了一下涉及的api的源码&#xff0c;理解错的地方勿喷 问题背景 公司业务中用到了一个map&#xff0c;作用是存储需要屏蔽的数据&#xff0c;请求打过来后会去其中匹配 若命中则直接退出 该map的使用有以下几个特点&am…

ffmpeg视频编码原理和实战-(4)H264原始码流分析

H.264是一种广泛使用的视频编码标准&#xff0c;它采用一种分层结构&#xff0c;其中最重要的一个层是NAL&#xff08;网络抽象层&#xff09;。在H.264编码中&#xff0c;原始码流&#xff08;bitstream&#xff09;是由多个NALU&#xff08;NAL Units&#xff09;组成的。了解…

欧洲历史的五个阶段

欧洲的历史基本上都是分裂的&#xff0c;大致可以分为五个时期&#xff0c;分别为古希腊时代、罗马帝国时代、中世纪时代&#xff0c;文艺复兴时代、工业革命时代。 一&#xff0c;古希腊时代 古希腊是西方文明的源头&#xff0c;也是最重要和最直接的文明起源&#xff0c;首…

Python编程学习第一篇——Python零基础快速入门(五)—字典

上期我们学习了List结构&#xff0c;今天大家一起来学习字典。Python中的字典是一种无序的数据类型&#xff0c;用于存储键值对(key-value)。它是一种可变的数据结构&#xff0c;可以在其中添加、删除和修改元素。字典中的键必须是唯一的&#xff0c;而值可以重复。 下面我们以…

前端想学习后端需要下载那些东西

前端想学习后端需要下载那些东西 需要下载的软件如下&#xff1a; 1、JDK的下载2、Tomcat的下载 3、MySQL的下载4、Navicat的下载 5、Maven的下载6、IDEA的下载下载教程&#xff1a;点击→此处 进入

【学习笔记】java SPI机制

目录 实现&#xff1a;示例&#xff1a;注意事项&#xff1a; Java SPI (Service Provider Interface) 是 Java 提供的一套用来发现和加载第三方服务的机制。SPI 的主要目的是为了解耦框架与插件&#xff08;服务提供商&#xff09;之间的依赖关系&#xff0c;使得框架能够灵活…

nexus搭建npm前端项目的私服

一、为什么要搭建私库 节省外网带宽加速maven构建部署第三方构件&#xff08;特别是无法从公共仓库下载的构件&#xff09;提高稳定性&#xff08;内网部署&#xff0c;更少地依赖外网&#xff09;降低中央仓库的负荷 构件&#xff0c;好比我们的藏书&#xff0c;去书店或商城…