切圖系列:transform你不知道的那些事

NO IMAGE

transform

     <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

艾瑪,那麼多坑,逃 ( ゚Д゚)σ