css - css3はパーセントで変換されます

Question

私は完全にパーセントでcss3キューブを定義することに固執しています。

ここにCodepenの短い例があります

ご覧のとおり、立方体の面の幅と高さは親要素の100％であり、これは完璧に機能します。今、私は底面を50％下に、50％後ろに平行移動しようとしています。

ピクセル値の場合、これは問題ありません

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

しかし、パーセントでは何も起こりません

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

他に方法はありますか？または私は何かが欠けていますか？

score 9 · Accepted Answer

親コンテナのパーセンテージではなく、要素自体のパーセンテージです。仕様では次のように説明されています。

[パーセンテージ] は要素のボックスのサイズを参照します

%s に関して、仕様は次のように述べています。

translateZ translation-value では値を使用できないことに注意してください。存在すると、プロパティ値が無効になります。

ただし、代わりに、少なくとも Chrome では有効ではないようです。

ごめん：（

score 0 · Accepted Answer

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

2 に答える 2