transform你不知道的那些事

transform是诸多css3新特性中最打动我的,因为它让方方正正的box module变得真实了。

transform通过一组函数实现了对盒子大小、位置、角度的2D或者3D变换。不过很长时间内,我对以下问题都想不太明白:

1、尺寸缩放scalezoom变换有何不同,为什么被scale的盒子里的内容不会错位,但zoom不是。

2、位移(transform:translate)与相对定位、绝对定位(position:relative | absolute)有何关系?

3、在实际项目中发现,位图(无论是background-image还是img)在被transform后会模糊掉,尤其是scale;不仅如此,在一些网站,比如tmall.com,即使是矢量的svg文件在使用transform后,依然模糊了,transform是否对作用的盒子进行了类似栅格化的操作?

4、在实际项目中发现,如果父级元素使用了transform且其中的子元素进行了position:fixed定位,那么设置了position:fixed的子元素将不再基于窗口定位。

5、这种场景暂时未能重现,在chrome下:父级元素使用了position:fixed,子元素<a href=".."></a>设置了:hover伪类、transition过渡动画、并使用javascript动态添加/删除其class,此时会出现:hover样式失效或添加的class样式失效且transition过渡动画失效的现象。

等等。

先说原理吧。

在网上查看了一些大神的博客,transform是通过一系列矩阵变换完成的,scale等transform-function都是对matrix的封装,w3c里没找到有关说明。对于线性代数里的东西,博主表示非常小白,其中的数学原理,还是交给其他人去解释吧o(︶︿︶)o

w3里的解释是,transform基于可视化格式模型(visual formatting model,这样翻译对不对啊)并为其绘制出一个坐标系,而且所有在这个坐标系内进行的操作,如向右向下,都是在这个坐标系内以像素方式表示,原文:

The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.

那是不是意味着scale缩放,是否只是像素意义上的缩放呢?由此,因缩放导致的svg等矢量内容模糊失真是情理之中了??_?

个人猜测,应该先转换成像素,然后进行渲染,这应该和每个浏览器具体渲染过程有关,相关文档我没有查,如果有知道的,请给我留言。

要理解transform,还有一个事情要搞清楚,就是visual formatting model,借助谷歌度娘,找到了w3chelp上的中文版解释:

可视化格式模型是非常抽象的概念。它是 CSS 布局的核心,通过它,框( box )可以获得应有的尺寸,放到需要的位置。

我们通常所看到的页面都是平面 2D 的效果,但可视化模型却是 3D 的,除了 X 轴,Y 轴,还有决定元素显示顺序1的 Z 轴。 Z 轴垂直穿过计算机屏幕,面向用户的一侧是正轴,框在 Z 轴方向上离用户越近,显示越是靠前。

可视化格式模型的官方说法是,它规定了用户端在媒介中如何处理文档树( document tree )

……

本部分会涉及很多新概念,如包含块、元素的类型、定位体系、块级格式化上下文、行内格式化上下文、浮动、绝对定位和 z-index,以及可视化格式模型的细节部分,自动宽度高度的计算等。

博主第一次听到visual formatting model这个概念,但看了解释应该知道,这不是一个新概念,姿势水平捉急了?_?

根据这个解释,元素设置了transform并不会改变元素所在的文档流,其布局仍然受盒模型支配,因此这里的变换的效果是可以与浮动、定位并存的。

  • 当元素设置了transform后,会为该元素定义一个坐标系,并且在该坐标系内进行矩阵变换,将变换结果映射到用户坐标系(也就是实际上的上下文)中。

  • 多个矩阵变换函数将依次从左到右计算,如transform:translate(80px, 80px) scale(1.5, 1.5),浏览器会先计算位移,再缩放1.5倍。以下两种代码效果相同:

    html <div style="transform: translate(80px, 80px)"> <div style="transform: scale(1.5, 1.5)"> <div style="transform: rotate(45deg)"></div> </div> </div>

    html <div style="transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);"> </div>

  • 坐标原点的位置受属性 transform-origin的影响。

  • 如果是3D变换,则还会将其加入一个3D渲染上下文(3D rendering context)。根据个人理解,无论有多少个转换为3D的元素,其将始终在这个上下文内并可能相互影响,类似一个文档中的多个被绝对定位的元素。

  • 任何非none的transform值都会导致一个堆叠上下文(stacking context)和包含块(containing block)的创建。

不过,并不意味着和谐,不然怎么会有那么多坑问题嘛!(,,?▽?,,)

如果元素因为transform而撑开了父级元素,父级元素会根据自身的overflow属性决定是否出现滚动条、隐藏溢出的部分或是别的什么。

另外,根据规范,由于堆叠上下文的创建,该元素会影响其子元素的固定定位:被设置position:fixed的子元素将不会基于viewport定位,而是基于这个父元素。

我们知道,一般情况下,所有的position值不为static的元素都会被放到同一个堆叠上下文内(ie不高级浏览器不算),也就是说,只存在 一个堆叠上下文。而设置了transform的元素则不同,由于它创建了一个新的堆叠上下文,也就是说,其内部被定位的元素的z-index会放在一个完 全独立的空间内。

但是这个堆叠上下文不包含被定义transform的元素本身,它仍被放在更大的堆叠上下文(如果有的话)里。

说到这,开篇提到的问题2、4都已经找到答案了,但目前,Chrome还存在一个bug:rendering bug : position:fixed AND -webkit-transform。

上面提得另一个问题重现场景比较麻烦,先不讨论了。

留几个坑回头填:

  • transform 遇见 display:table | table-row | table-cell
  • 3D渲染上下文是个什么玩意
  • 陌生又熟悉的backface-visibility
  • transform 与 css3动画
  • transform 与 canvas
  • transform 与 svg

转载于:https://www.cnblogs.com/gyjWEB/p/4832998.html

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

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

相关文章

【SVM】简单介绍(三)

我们考虑SVM的对偶问题&#xff0c;我们通常是在对偶空间中进行求解的。 1、Lagrange Multipliers 对于一个很一般的问题 Minimize f(x)subject to {a(x)≥0b(x)≤0c(x)0\begin{aligned} \text { Minimize } & f(x) \\ \text { subject to } \quad & \left\{\begin{a…

玩转iOS开发:NSURLSession讲解(三)

文章分享至我的个人技术博客: https://cainluo.github.io/14986211698053.html 前言 虽然前面两讲都是说了NSURLSession的一些理论上的知识, 但我们现在起码对NSURLSession有个大概的了解, 并不会像一开始的那样, 一脸懵逼的看着, 这个请求是什么鬼, 那个方法是什么鬼, Task是什…

轻松搞定面试中的二叉树题目

版权全部&#xff0c;转载请注明出处&#xff0c;谢谢&#xff01;http://blog.csdn.net/walkinginthewind/article/details/7518888 树是一种比較重要的数据结构&#xff0c;尤其是二叉树。二叉树是一种特殊的树&#xff0c;在二叉树中每一个节点最多有两个子节点&#xff0c;…

李倩星r语言实战_《基于R的统计分析与数据挖掘》教学大纲

《基于R的统计分析与数据挖掘》课程教学大纲课程代码&#xff1a;090542009课程英文名称&#xff1a;R Language and Data Mining课程总学时&#xff1a;32讲课&#xff1a;32实验&#xff1a;0上机&#xff1a;0适用专业&#xff1a;应用统计学大纲编写(修订)时间&#xff1a;…

自动化测试小结

最近差不多一年从事自动化的测试工作&#xff0c;从开始对自动化一点都不了解到现在能从实现用例、手动命令行执行用例、自制工具来执行用例&#xff0c;感觉进步还是有的。 自动化测试对于手动测试应该是有不小的优势的&#xff0c;虽然在自动化的用例实现中刚开始的时候会显得…

python地理可视化_【Python教程】地理可视化之二

Basemap是Matplotlib的一个子包&#xff0c;负责地图绘制。昨天的推送对如何绘制风向图进行了描述&#xff0c;本文再次利用该包简单介绍如何绘制海洋及海冰温度彩色图示&#xff0c;该图常见于NOAA官网。具体操作如下&#xff1a;导入命令1)设置工作环境并导入程序包%cd "…

寻找白板上的便签条

问题来源&#xff1a;http://answers.opencv.org/question/162480/contour-detection-for-gray-stickers-on-white-background/ 题目的大概意思就是这样的白板&#xff0c;寻找上面的各种便签条。我找到了橘色的&#xff0c;结果是这样代码是这样Mat src imread("gray-st…

LeetCode Permutations

原题链接在这里&#xff1a;https://leetcode.com/problems/permutations/ 题目&#xff1a; Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have the following permutations:[1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2]…

去除内存上的警告,避免程序崩掉

# pragma clang diagnostic push # pragma clang diagnostic ignored "-Warc-performSelector-leaks" [self performSelector:callFunc withObject:array[1]]; # pragma clang diagnostic pop 使用原理&#xff1a;将出现警告的代码加入内存栈中转载于:https://www.c…

opengl2 vtk 编译_编译和使用VTK时值得注意的点(待续)

最近的一个项目中需要使用VTK&#xff0c;于是开始了VTK的漫漫编译之路。长篇大论的编译步骤网上数不胜数&#xff0c;在这里不再细说&#xff0c;可自行google。这里主要说一些在编译过程中需要注意的地方&#xff0c;以免走歪路。1、使用cmake进行第一次configure的时候需要选…

gg

转载于:https://www.cnblogs.com/lyzuikeai/p/7091206.html

二:Go编程语言规范-类型

1.类型 布尔值&#xff0c;数值与字符串类型的实例的命名是预声明的。 数组&#xff0c;结构&#xff0c;指针&#xff0c;函数&#xff0c;接口&#xff0c;切片&#xff0c;映射和信道这些复合类型可由类型字面构造。 每个类型 T 都有一个 基本类型&#xff1a;若 T 为预声明…

HDU 1728 逃离迷宫

这道题做的我想哭啊。。WA了将近十次了吧 一开始我用数组模拟的队列&#xff0c;后来和老大代码对拍&#xff0c;感觉改的是基本都一模一样了&#xff0c;还是WA 实在没有办法了&#xff0c;改用queue了 题目里的x是列y是行&#xff0c;和代码里的反过来的&#xff0c;要注意&a…

Nginx(六)-- 配置文件之Gzip

1.概念及作用 Gizp主要对内容、静态文件做压缩&#xff0c;用来提升网站访问速度&#xff0c;节省带宽。 2.使用方法 gzip既可以配置在server中&#xff0c;也可以配置在server外&#xff0c;此处配置在server中&#xff0c;如下&#xff1a; 说明&#xff1a;  gizp on|off 是…

误码率越高越好还是越低越好_夜间护理步骤越多越好还是越少越好?NFF

现在很多人都知道了夜晚是护肤的黄金护肤时间&#xff0c;有些很聪明的姐妹就从夜晚着手&#xff0c;使用很多种护肤品&#xff0c;希望达到事半功倍的效果&#xff0c;但好皮肤不常有&#xff0c;皮肤问题却常有&#xff01;既然如此&#xff0c;不少人就问了&#xff0c;夜间…

【随机森林】random forests 简单介绍

Random Forest&#xff0c;顾名思义 Random 就是随机抽取&#xff1b; Forest 就是说这里不止一棵树&#xff0c;而由 一群决策树组成的一片森林 &#xff0c;连起来就是用随机抽取的方法训练出一群决策树来完成分类任务。RF用了两次随机抽取, 一次是对训练样本的随机抽取; 另一…

侧边工具开发2

1.使用图片的形式会出现大量的图片&#xff0c;影响性能&#xff0c;而且不易修改&#xff0c;所有使用图标加文字的形式进行 <a href"javacript:;" class"toolbar-item"><span class"toolbar-btn"><i class"toolbar-icon&q…

斐波那契?

斐波那契&#xff1f; Time Limit: 1000ms Memory limit: 32768K 有疑问&#xff1f;点这里^_^ 题目描述 给出一个数列的递推公式&#xff0c;希望你能计算出该数列的第N个数。递推公式如下&#xff1a; F(n)F(n-1)F(n-2)-F(n-3). 其中&#xff0c;F(1)2, F(2)3, F(3)5. 很熟…

clustalw序列比对_序列比对之Clustalx与Clustalw使用指南

相关专题这几天实验需要做多序列比对&#xff0c;很久不做了&#xff0c;一时之间不知道如何使用clustal这个工具了。在网上搜集了一些资料&#xff0c;做个整理&#xff0c;总结了Clustalx和Clustalw的使用&#xff0c;省得以后久不使用又生疏了&#xff0c;又要去整理了&…

信息安全系统设计基础第三周学习总结—20135227黄晓妍

一.Vim编辑器 1.Vim的六种模式 2.Vim三种常用模式的使用方式&#xff0c;以及三者的切换。打开Vim即默认进入普通模式&#xff0c;按i进入插入模式&#xff0c;按esc从插入模式退出普通模式&#xff0c;再按&#xff1a;进入命令行模式。 普通模式下游标的移动 按键 说明 h …