首页 > 开发 > CSS > 正文

深入解读CSS3中transform变换模型的渲染

2024-07-11 08:41:27
字体:
来源:转载
供稿:网友

介绍

transform是通过一系列矩阵变换完成的,scale等transform-function都是对matrix的封装。

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

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

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

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

html

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表