transfom技术细节

简介: transform可以将2D元素或者3D元素进行旋转,缩放,移动或者是倾斜,其语法如下,当值为none为默认,其他通过提供的转变函数进行相应的转变

transform

什么是transform?

transform可以将2D元素或者3D元素进行旋转,缩放,移动或者是倾斜,其语法如下,当值为none为默认,其他通过提供的转变函数进行相应的转变

img {
    transform: none|transform-functions
}
复制代码

技术细节

  1. 对于旋转的元素来说,其盒模型位置不会改变,现在页面上有两对冰墩墩和雪容融,transform为默认状态

1.webp.jpg

现在我们为第一个图片附加transfrom向右移动200像素,效果如下,我们会发现第二张图片的位置没有发生变化,这说明了什么,我们都知道在文档中的文档流的默认的从左到右从上到下,所以这说明了transform并没有改变我们盒子模型的位置,其盒模型占位并没有发生改变

1.webp.jpg

  1. 创建层叠上下文
    在我们为元素附加transfrom后他就会创建层叠,由上图就可以了解到,被附加的图片覆盖了第二张图片
  2. 内联元素属性无效
    内联元素我们都知道,一行可以存在多个内联元素,下面三个分别为内联元素,块状元素,替换元素,我们给他们设置了向右平移20像素,但是结果是怎么样的呢?span元素没有移动,其他向右平移了20像素
<span style="transform: translateX(20px);">我是内敛元素</span>
<div style="transform: translateX(20px);">我是块状元素</div>
<img src="./01-bdd-加油.png" alt="" style="transform: translateX(20px);">
复制代码

1.webp.jpg

  1. 不同设置顺序不同展示效果
    当我们为同一元素附加上同样效果但是顺序不一样的时候,其最后的效果相同吗,下面我们为同样的图片,一个先缩小一半再向右平移100像素,一个先向右平移100像素,再缩小一半。
<div>
    <img src="./01-bdd-加油.png" alt="" style="transform: scale(0.5) translateX(100px);">
  </div>
  <div>
    <img src="./01-bdd-加油.png" alt="" style="transform: translateX(100px) scale(0.5);">
  </div>
复制代码

1.webp.jpg

从图片的效果来看,其不同顺序作用相同的值时,最后的效果是不一样的。


相关文章
|
8月前
|
算法 开发者
编码之道:从技术细节到系统哲学
【4月更文挑战第21天】 在编程世界里,我们常常沉迷于代码的细节、算法的精妙以及框架的强大。然而,真正优秀的技术作品不仅仅是冷冰冰的代码堆砌,更是蕴含着设计者对问题深刻的理解和系统的全局思考。本文将脱离传统摘要的格式,通过一系列的观点和案例,探讨如何从技术的细节走向对系统设计的深刻理解,从而提升我们的编程艺术。
|
5月前
|
缓存 负载均衡 JavaScript
探索后端开发之道:构建高效API的实践指南
【8月更文挑战第1天】在数字时代的浪潮中,后端开发如同一座桥梁,连接着用户界面与数据处理的深渊。本文旨在通过实践案例,揭示如何打造一个高效、稳定的后端API,确保数据流动如丝般顺滑。我们将深入探讨设计原则、代码实现和性能优化等关键环节,为读者呈现一场技术盛宴。让我们一同启程,解锁后端开发的无限可能。
|
5月前
|
JSON 缓存 JavaScript
探索后端开发之巅:构建高效API的秘诀
【8月更文挑战第31天】本文将引导你穿越后端开发的迷宫,解锁构建高效API的秘密。从基础架构到代码实践,我们将深入浅出地探讨如何打造既快速又稳定的后端服务。通过具体案例和代码示例,你将学会如何优化你的API设计,提升性能,并确保可扩展性与安全性。无论你是新手还是资深开发者,这篇文章都将为你提供宝贵的见解和实用的技巧。
133 51
|
8月前
|
存储 设计模式 架构师
编码之道:从技术细节到系统架构的升华
【5月更文挑战第9天】 在编程的世界里,每一行代码都承载着功能与美学的双重使命。本文将探讨如何从关注技术细节出发,逐步深化对系统架构的理解,并在实践中实现从代码编写者到系统设计师的转变。通过分析具体案例,我们将揭示那些看似平凡的技术感悟如何在复杂系统的构建中发挥关键作用,以及这一过程中对软件开发者的启示。
83 3
|
5月前
|
缓存 JSON 监控
构建一个健壮的API:设计原则与技术实践
【8月更文挑战第10天】构建一个健壮的API需要遵循一系列的设计原则和技术实践。从明确API目标与范围、遵循RESTful原则、注重安全性设计、优化性能、实施监控与日志记录到版本控制,每一步都至关重要。通过不断迭代和优化,我们可以打造出更加稳定、高效、易用的API,为用户提供更好的服务体验。
|
6月前
|
测试技术 API
接口设计原则与最佳实践指南
接口设计原则与最佳实践指南
|
8月前
|
消息中间件 缓存 人工智能
编码之道:从技术细节到系统智慧
【5月更文挑战第14天】 在软件工程的宏伟长河中,每一行代码都是建筑师精心挑选的石块。这篇文章将探讨如何从对技术细节的深入理解发展到构建复杂系统的全局智慧。我们将通过具体案例和经验分享,揭示那些看似微不足道的技术选择如何汇聚成影响深远的系统决策。
|
8月前
|
安全 vr&ar C++
C++:编程语言的演变、应用与最佳实践
C++:编程语言的演变、应用与最佳实践
|
8月前
|
算法
编码之道:从技术细节到哲学思考
【4月更文挑战第29天】 在数字化的浪潮中,编程已不仅仅是一门技艺,它逐渐演变成一种对世界的理解方式。本文将探讨编程背后隐藏的哲学意义,揭示代码如何反映人类思维,并分析技术进步与人类发展间的相互作用。通过个人的技术实践和感悟,我们将一起探索程序设计背后的深层次思考,从而理解技术与生活、逻辑与哲学之间微妙的联系。
|
8月前
|
算法 程序员
代码之禅:从技术细节到哲学思考
【4月更文挑战第23天】在编程的世界里,每一行代码都是对技术深度的一次探索,每一段程序都是逻辑严密性的一种体现。本文通过作者的个人技术感悟,探讨了编程不仅仅是一种职业技能,更是一种思考世界的方式。从最初的技术困惑到深层的哲学思考,文章试图揭示编程背后的思维模式和生活哲学,展现一个程序员从技术实践者到思想者的蜕变过程。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等