css - X を回転させたときに div が一番上にくるようにするにはどうすればよいですか?

Question

私はこれを持っています：

div {
    transform:rotateX(120deg);
}

しかし、変換を行うと、div の上に空白が残ります。divを一番上に保つにはどうすればよいですか。

score 3 · Accepted Answer

を探していることは間違いありませんtransform-origin。

あなたの場合、何かがtransform-origin: 0% 33%;うまくいきます。

ここに jsFiddle - 遊んでみてください。

デフォルトでは、原点はに設定されてい50% 50%ます。

score 2 · Accepted Answer

要素の回転ポイントを変更するには、を使用できますtransform-origin。

ブラウザのサポートは制限されており、接頭辞が付けられているため、詳細についてはこちらを参照してください: (このような 3D 変換では、chrome と safari でのみ機能すると思います)

次に例を示します。

2 番目の div が一番上に固定されていることに注目してください。また、原点が上にある場合、120 度回転すると要素が上下逆さまになり始めることに注意してください (この時点で要素の裏側が実際に表示されています)。

score 0 · Accepted Answer

何かのようなもの：

div {
    transform:rotateX(120deg);
    transform-origin:top left;
}

これを把握する最善の方法は、DIV が一枚の紙であり、紙の左上に釘を刺しているふりをすることです。X 軸で紙をめくっているので、紙の上部を折り曲げ点として使用し、その領域を中心に回転します。

通常のステートメントはまだ広く採用されていないため、CSS で「transform」と「transform-origin」の「webkit」バージョンと「ms」バージョンの両方を宣言することを忘れないでください。

3 に答える 3