メモ:CSS 3中軸回転立方体を作成する

プレビューアドレス-純CSS作成中軸回りに回転する立方体参照サンプル-CodePen立方体demo
perspective
エレメントが表示される場所のビューを設定する

perspective: number|none;

値
説明
number
エレメント距離ビューの距離、ピクセル単位
none
既定値.0と同じです.ピボットを設定しない

-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;

perspective-origin
3 D要素の基点位置perspective-originプロパティを設定して、3 D要素のX軸とY軸を定義します.このアトリビュートを使用すると、3 D要素の下部の位置を変更できます.エレメントにperspective-originプロパティを定義すると、エレメント自体ではなくサブエレメントにピボット効果が得られます.

perspective-origin: x-axis y-axis;

値
説明
x-axis
このビューのx軸上の位置を定義します.デフォルト:50%
y-axis
このビューのy軸上の位置を定義します.デフォルト:50%

-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-ms-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;

-webkit-box-reflect
バックグラウンドを作成する効果はW 3 Cの標準属性ではなく、ブラウザのプレフィックスを付ける必要があります

box-reflect:none | <direction> <offset> <mask-box-image>

値
説明
none
既定値、バックグラウンド効果なし
direction
バックグラウンド方向(above:原図上、below:原図下、left:原図左側、right:原図右側)
offset
バックグラウンドと原図の間の距離(ピクセル値/パーセント)
mask-box-image
バックシャドウのマスク効果、背景画像/グラデーション生産の背景画像は鑫大の効果を参考にすることができます

-webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1)));

transform-origin
回転要素の基点位置の設定

transform-origin: x-axis y-axis z-axis;

値
説明
x-axis
ビューをX軸のどこに配置するかを定義します.可能な値(left/center/right/length/%)
y-axis
ビューをY軸のどこに配置するかを定義します.可能な値(top/center/bottom/length/%)
z-axis
ビューをZ軸のどこに配置するかを定義します.可能な値(length)

transform-origin:20% 40%;