css3翻譯百分比

我一直在用百分比完全定義一個css3多維數據集。css3翻譯百分比

在Codepen

這裏一個簡單的例子

正如你所看到的立方體的表面具有100％的寬度和它的父元素，它可以完美的高度。現在，我正試圖將底部面50％和50％翻回來。

與像素值，這是沒有問題的

transform: rotateX(-90deg) translateZ(50px) translateY(50px);

，但什麼也沒有發生百分之

transform: rotateX(-90deg) translateZ(50%) translateY(50%);

還有沒有其他辦法？或者我錯過了什麼？

來源

2012-10-27 Slemgrim

按照您可能期望的方式，父元素的百分比不是元素本身的百分比。該規範將它描述爲：

[百分比]參見[S]的元素框

的大小對於％S，規範說：

注意值不允許在translateZ 翻譯值，如果存在將導致該propery值爲無效。

儘管如此，它們似乎並非對Chrome至少有效。

對不起:(

來源

2012-10-27 20:54:10

派上用場的東西，我發現使用'em'使用中'相對距離翻譯'功能。在父元素中設置'em'的大小，然後在那裏，'1em'爲100％，'0.5em'爲50％等等。 – jaypeagi

你可以擴大那jaypeagi？ – MHz

我發現最好的是做了一些JavaScript代碼。

而不是使用translateZ()價值，我已經使用了transform-origin: x y z爲軸線是在立方體的中心。

的一點是，該立方體可以打開其中心（與主面的中心不轉和翻譯Z ...）

這裏是jQuery的功能（最終應用在$(document).ready()和$(window).resize()）：

function get50() { 
    var half_width = $('#front').width()/2; 
    $('#front').css({ 
    transformOrigin : '50% 50% -' + half_width + 'px' 
    }); 
}

你可以看到一個DEMO這裏...

來源

2016-11-16 02:45:47

css3翻譯百分比

回答

相關問題