以下のような効果が、この図で撮影されています。
マウスは4つの方向から入力することができ、マウスの回転方向に対応するに従ってあろうキューブを右から回転キューブに左から右へ、上から下に回転させ、例えば上から入射するように、入射
どのように達成するために：
図1に示すように、3D回転は、主にCSS3を書き込むために使用され
図2に示すように、全体的なレイアウトが分割されています
マウスを実装する少量のJSを使用して3は、イベントから移動しました
以下を達成するためのHTML：
<のdivクラス= "ラッパー">
<UL>
<LI>
<のdivクラス= "箱">
<のdivクラス= "ショー">
<IMG SRC = "./ IMG / 1.png" ALT = "">
</ div>
<DIV CLASS = "隠す">非表示</ div>
</ div>
</ LI>
<LI>
<のdivクラス= "箱">
<のdivクラス= "ショー">
<IMG SRC = "./ IMG / 2.png" ALT = "">
</ div>
<DIV CLASS = "隠す">非表示</ div>
</ div>
</ LI>
<LI>
<のdivクラス= "箱">
<のdivクラス= "ショー">
<IMG SRC = "./ IMG / 3.png" ALT = "">
</ div>
<DIV CLASS = "隠す">非表示</ div>
</ div>
</ LI>
</ UL>
</ div>
<スクリプトSRC = "./ JS / jqueryの-3.3.1.min.js"> </ SCRIPT>
<スクリプトSRC = "./ JS / index.js"> </ SCRIPT>
UL Liが小さいボックス、（プルーフあるによる非表示面に加えて）二つの面を有する小さなボックス、非表示にするブロックの回転位置を変更するために必要な時間を加えた、ここで使用されます
達成するためのCSSスタイル：
* {
マージン：0;
パディング：0;
リストスタイル：なし。
}
.wrapper {
幅：800ピクセル;
マージン：100pxに自動;
国境：1pxの固体＃000;
国境半径：10pxの;
表示：フレックス。
正当化 - コンテンツ：センター;
ALIGN-アイテム：センター;
}
UL {.wrapper
幅：100％;
/ *高さ：200pxの。* /
表示：フレックス。
正当化 - コンテンツ：センター;
ALIGN-アイテム：センター;
}
ULのLi .wrapper {
幅：200pxの。
高さ：200pxの。
マージン：20ピクセル;
視点：1000px;
}
ULのLi■は{.wrapper
幅：200pxの。
高さ：200pxの。
位置：相対;
トランスフォームスタイル：保存-3D。
アニメーション：簡単にアウト転送o.3s。
}
.wrapper ULのLi■は.SHOW {
位置：絶対;
幅：100％;
高さ：100％;
}
.wrapper ULのLi■は.SHOW IMG {
幅：100％;
高さ：100％;
}
{ULのLi■はの.hide .wrapper
位置：絶対;
幅：100％;
高さ：100％;
テキスト整列：センター;
フォントサイズ：30px;
色：#FFF;
表示：フレックス。
正当化 - コンテンツ：センター;
ALIGN-アイテム：センター;
背景色：＃000;
}
.wrapper ULのLi■は.SHOW {
変換：translateZ（100ピクセル）。
}
{ULのLi■はの.hide .wrapper
変換：translateZ（-100px）。
}
ULのli .box.inトップ.hide .wrapper、
.wrapper ULリチウム.box.outトップ.hide {
変換：rotate3dは（1,0,0,90deg）translateZ（100pxに）;
}
UL李.box.inボトム.hide .wrapper、
{ULのLi .box.out底.hide .wrapper
変換：rotate3dは（1,0,0、-90deg）translateZ（100pxに）;
}
ULのli .box.in左.hide .wrapper、
ULのLi .box.out左.hide {.wrapper
変換：rotate3dは（0,1,0、-90deg）translateZ（100pxにします）。
}
UL李.box.in右.hide .wrapper、
.wrapper ULリチウム.box.out右.hide {
変換：rotate3dは（0,1,0,90deg）translateZ（100pxに）;
}
.wrapper ULリチウム.box.inトップ{
アニメーション名：中トップ。
}
.wrapper .box.outトップ{
アニメーション名：アウトトップ。
}
.wrapper ULリチウム.box.in底{
アニメーション名：中下;
}
.wrapper .box.out底{
アニメーション名：アウトボトム;
}
ULのLi .box.in左{.wrapper
アニメーション名：左に-;
}
.wrapper .box.out左{
アニメーション名：左アウト。
}
.wrapper ULリチウム.box.in右{
アニメーション名：中右;
}
.wrapper .box.out右{
アニメーション名：アウト右;
}
トップ@keyframes {
0％{
変換：回転（は0deg）。
}
100％{
変換：回転X（-90deg）。
}
}
@keyframesアウトトップ{
0％{
変換：回転X（-90deg）。
}
100％{
変換：回転X（は0deg）。
}
}
中底@keyframes {
0％{
変換：回転（は0deg）。
}
100％{
変換：回転X（90deg）。
}
}
外底{@keyframes
0％{
変換：回転X（90deg）。
}
100％{
変換：回転X（は0deg）。
}
}
@keyframesに左{
0％{
変換：回転Y（は0deg）。
}
100％{
変換：回転Y（90deg）。
}
}
外左@keyframes {
0％{
変換：回転Y（90deg）。
}
100％{
変換：回転Y（は0deg）。
}
}
右@keyframes {
0％{
変換：回転Y（は0deg）。
}
100％{
変換：回転Y（-90deg）。
}
}
アウト右@keyframes {
0％{
変換：回転Y（-90deg）。
}
100％{
変換：回転Y（は0deg）。
}
}
次いで、回転位置に移動する前にボックスを非表示にし、必要性に入る前に、実現された2つのクラスに分類されている2例エントリとアウトを分割することによって名前が使用アニメーションの制御ボックスに、クラス名を追加することによって達成する回転JSでクラス名への追加を制御しながら回転、
ここでX軸方向に強調回転回転は、右Yが正回転角な軸が、左回転がそう変換、Z軸の回転も変化する特徴、負の角度で、外側に向かって回転角が負であり、正の角度でありますオーダーの作成プロセスは非常に重要です。
達成され、ここで達成でトップとアウトトップ、共感下。同じ左と右、などを達成するために
JSコード：
機能イベントボリューム（）{
$（ 'ボックス '）。（' のMouseEnter'、機能（e）の上の{
addClassTo（この、E 'で'）;
}）。（ 'mouseleave'、関数（E）に{
addClassTo（この、E 'アウト'）;
}）
}
イベントボリューム（）;
関数getDirect（DOM、E）{
VAR X = e.offsetX - dom.offsetWidth / 2。
ここで、y = e.offsetY - dom.offsetHeight / 2。
VaRのD =（恐らくMath.round（（（Math.atan2（Y、X）*（180 /にMath.PI））+ 180）/ 90）+ 3）％4。
Dを返します。
}
関数addClassTo（DOM、例えば、状態）{
VaRのD = getdirect（DOM、E）。
「」=方向でした。
スイッチ（D）{
ケース0：{
方向=「-top」。
ブレーク;
}
ケース1：{
方向=「右回転」。
ブレーク;
}
ケース2：{
方向=「-bottom」。
ブレーク;
}
ケース3：{
方向=「-left」。
ブレーク;
}
デフォルト：休憩;
}
$（DOM）.ATTR（ 'クラス'、 '箱' +状態+方向）。
//戻り方向。
}
クラス外の名前に追加したときJS機能が判断された入力または外出するために使用されており、
VaRのD =（恐らくMath.round（（（Math.atan2（Y、X）*（180 /にMath.PI））+ 180）/ 90）+ 3）％4;フレーズが入ってくることを決定するために使用される方向（上下左右））0-4（中心点は小箱の中心に移動させ、その角度を取って計算され、それが4の残りの部分に右方向に基づいて計算された後ここで、0であり、時計回りの増加が、3を添加することにより4、次いで0最上位にある残りは、増加は、残りの3に対して時計回り、それが入ってくる方向と判定されます。
さて、この上のこの小さなデモは、それをよく理解してください。CSS 3D変換の深い理解
