CSS には、オブジェクトをパーセンテージで移動するときの標準的な動作があり、このパーセンテージはその親コンテナー (div) のサイズを表します。
これは、CSS3 を使用する場合には当てはまりませんtransform: translate3d()。X、Y、Z 座標のいずれかにパーセンテージ値を使用する場合、パーセンテージは親ではなく現在のオブジェクトの寸法を表します。
問題は明らかです。CSS3 アニメーションを使用transform: translate3d()し、動的にサイズ変更可能な親の寸法内で現在のオブジェクトを移動する必要がある場合、その方法がわかりません。例: usingtranslate3d(100%, 0, 0)は、オブジェクトを含むブロックではなく、現在のオブジェクトの物理的な幅だけオブジェクトを移動します。
親の動的に変化する次元を取得する方法について何かアイデアをください。または、ハードウェアアクセラレーションを使用して、現在のオブジェクトを親内で変換する方法はtranslate3d()?
Mozilla Developer Network は次のことを確認しています:パーセンテージ (トランジション内) は境界ボックスのサイズを参照します。
回避策はありますか？