文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css3 scale指的是什么

2024-04-02 19:55

关注

本文小编为大家详细介绍“css3 scale指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3 scale指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在css3中,scale表示“缩放”,是运用于transform属性的内置函数,用于对指定元素进行2D或3D的缩放转换;scale函数有多种,包括:scale()、scaleX()、scaleY()、scaleZ()、scale3d()。

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

在css3中,scale的意思为“缩放”,是运用于transform属性的内置函数。

transform属性的scale函数有多种:

改变的不是元素的宽高,而是 X 和 Y 轴的刻度

scaleX(),scaleY()

  缩放该元素,>1 放大, <1 缩小  默认值是 1;

css3 scale指的是什么

看了上面的图,你可能会觉得,好像是100px  变成了200px   但是实际上,并不是。变的不是 元素的 宽高。

css3 scale指的是什么

其实,他改变的不是元素的宽高,而是x 和 y 轴的刻度 ↓

css3 scale指的是什么

scale()

这个呢,是上面两个的合体,也就是 参数 第一个是x 第二个是y

css3 scale指的是什么

css3 scale指的是什么

scale3d()

第一个参数是 x  第二个参数是y  第三个参数是z ,也就是scalex scaley scalez 的结合体。

scalez吧,这个值原本就是3D的,所以可能会有点难理解, 像上面这个图, 本来就是2D 的图,你再怎么拉伸他的Z 轴,也是看不出效果的。前提是你的图,是3D的才能拉伸,2D的是拉伸不了的。  如果有不知道Z轴在哪里的朋友,请点这里→ rotateZ

探索:

首先,我们来思考一个问题,使用 rotate进行旋转,那么 X 和 Y 轴是会跟着旋转而变化的,那么这个时候加上 scaleX  和 Y,那么旋转的过程中,会不会带上scale 的效果?

先来观察一下, 先rotate  再 scale 的效果:

css3 scale指的是什么

看完上面的图,是不是觉得,旋转的时候,会带着scale的效果一起旋转。 但是!  如果把他俩位置换了,那结果是截然不同的,先scale 再 rotate

css3 scale指的是什么

对比两张图,你就会发现,第一张的效果,确实是带上了scale的效果一起旋转的,怎么 换了个位置,就不一样呢?

其实呢,先rotate,再scale(先旋转,后缩放) 是会把效果带上旋转的,但是  先scale 再rotate(先缩放,后旋转) 是不会把缩放的效果带上旋转的,缩放的效果,会留在原地,等你经过的时候,就会生效。看下面的图解,缩放的比例,会留在原地,经过的时候,就会恢复比例。

css3 scale指的是什么

读到这里,这篇“css3 scale指的是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯