css3％で翻訳する

Question

％で完全にcss3キューブを定義しようとしています。ここでは簡単な例Codepen

で

http://codepen.io/anon/pen/detAB

キューブの顔を見ることができるように、100％の幅と完璧に動作し、その親要素の高さを持っています。今私は下面を50％戻して50％戻すようにしています。ピクセル値と

これは

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

問題ありませんが、パーセントで何も

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

他の方法があるが起こりませんか？または私は何かを逃している？

Answer 1

期待される方法ではなく、要素自体の親コンテナの割合です。スペックとしてそれを説明します：％sのについては要素のボックス

のサイズに[割合]参照してください[S]

、スペックは言う：その値

注意をtranslateZ translation-valueには許可されていません。存在する場合、propery値は になりません。

代わりに、少なくともChromeではいずれのバージョンでも有効ではないようです。

Answer 2

私が見つけた最高の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を見ることができます...