問題タブ [webkit-perspective]

簡単な CSS トランジションを作成しているときに問題に直面しました。

body私はその唯一の子がdiv絶対位置を持つ私の要素を持っています。

ホバー疑似クラスdivに単純な 3D トランジションを持つ四角形を挿入し、親要素にスタイルを設定して見栄えを良くしたいと考えています。transform: rotateX(90deg)perspective

本体に を設定するperspectiveと、トランジションが適切に機能します。遠近効果が作成され、見栄えがよくなります。しかし、問題はここにありますが、子は絶対位置を失います (少なくとも Chrome では)。

コードペンの例を作成しました。スタイルをコメントアウトするbodyと、絶対位置が適用されます。

perspectiveを設定するともdiv青色の背景が消えますが、これは高さが 0 になるためだと思います。

バグですか？どうすれば修正できますか？

ありがとうございました

<canvas>CSS を使用してフルページ要素を 45 度の視点に配置するこのスニペットがあります。ただし、変換されたキャンバスはページの境界を超えており、クリップされています。

遠近効果を維持しながら、キャンバス全体がページの境界内に留まるようにするにはどうすればよいですか (台形の下側はページとまったく同じ幅にする必要があります)。どのページ サイズでも動作する限り、CSS または JavaScript ソリューションは問題ありません。