mysteries of css transform

css transform 除了可以进行图形变换,最近阅读规范还发现一些平常很少注意影响其他 css 属性以及元素的地方。

document flow

transform 和 relative 类似,并不会影响页面的其他文档流。例子

getBoundingClientRect

规范规定 transform 并不会像 relative 一样影响 getBoundingClientRect 的值,但各个浏览器都没遵守!例子

stack context

transform 和 relative 类似,会建立 stack context,影响期内的绝对定位元素。例子

default zindex

建立 stack context 后 transform 元素的 z-index auto 类似于 0,而不是 relative 那种的 auto。例子

containing block

transform 还会建立 containing block,因此会影响期内的 fixed 元素。例子

backgroud-attachment

fixed background 图片会设置在 transform 元素上,目前只有 chrome 实现正确?例子

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s