CSS變換

如果我有兩個嵌套的元素，讓說：CSS變換

<div id="outside"> 
    <div id="inside">Foo</div> 
</div>

和我申請一個旋轉的外界因素，讓45度說順時針旋轉：

<div id="outside" style="transform: rotateZ(-45deg);"> 
    <div id="inside">Foo</div> 
</div>

我現在想把屏幕裏面的div翻譯一下。

<div id="outside" style="transform: rotateZ(-45deg);"> 
    <div id="inside" style="transform: translateY(100px);">Foo</div> 
</div>

http://jsfiddle.net/du2w91vw/8/

哦，不！它繼承了它的父母變換（我真正想要的），並以45度角向下移動它。那麼我怎麼把它垂直向下移動，相對於屏幕（即世界空間翻譯）呢？

現在，我可以存儲所有其父變換，計算它自己，制定出正確的翻譯，但後來我可能也只是有一個完全平坦的DOM層次結構，做這一切我自己。我想要使用隱式繼承的變換！

tl; dr：是否有一種方法可以在不查找整個DOM樹進行變換或將所有父變換存儲在內存中的情況下獲取元素的世界變換？

注：我的要求是，我不能動的外層div。

編輯：我剛剛發現的getComputedStyle左右，這給了我一個矩陣回來。一個混亂的解決方案（做瀏覽器總是返回相同的格式？），但我可能能夠解決這個問題。

var t = getComputedStyle(element, null).getPropertyValue('transform') 
// e.g. t = "matrix(1, 0, 0, 1, -333, -26)"

編輯編輯：getComputedStyle是醜陋的。呃，爲什麼沒有這個好的解決方案。 How to read individual transform values in JavaScript?

來源

2015-08-31 Brendan Annable

你是什麼意思「相對於屏幕移動？」你想用200px轉換完成什麼？ – leigero

只需將元素垂直向下移動到屏幕上，而不是以45度的角度移動。 –

我得到你想要的。你有沒有考慮在'.outside'而不是'.inside'上應用翻譯？甚至將轉換原點更改爲-200px也可以。 –

我並不是完全清楚你的實際代碼是什麼樣子，但是當你想要在頁面上旋轉和翻譯一個對象時，你可能需要考慮在旋轉之前移動對象。

HTML

<div id="outside"> 
    <div id="inside">Fooooooooooooo</div> 
</div>

CSS

#inside{ 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); 
    color: red; 
    width: 100px; 
    height: 30px; 
    border: 1px solid black; 
} 

#outside{ 
    -ms-transform: translateY(200px); 
    -webkit-transform: translateY(200px); 
    transform: translateY(200px); 
}

JSFiddle

讓我知道，如果你的頁面結構不使用此解決方案的工作。

來源

2015-08-31 04:26:37 leigero

對不起，我忘了提及父母不允許搬家！ –

回答

相關問題