「HTML」
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル> jQueryのイメージとオープンアニメーション効果にキューブを回転させる</ TITLE>
<！ -雪が降るアニメーション- >
<SCRIPT SRC = "JS / jquery.min.js"> </ SCRIPT>
<SCRIPT SRC = "JS / snow.js"> </ SCRIPT>
<リンクタイプ= "テキスト/ CSS"のhref =「CSS /スタイル.css "のrel ="このスタイルシート"/>
</ HEAD>
<BODY>
<DIV CLASS ="雪-コンテナ">
<DIV CLASS ="ジーティ「>
<span>を
蘇姉妹愚かなコック
</ span>を
</ div>
<DIV CLASS = "東台">
<ulのクラス= "UL">
<LI>
<IMG SRC = "画像/ 001.JPG" ALT = "">
</ LI>
<LI>
<IMG SRC = "画像/ 002.JPG" ALT = "">
</ LI>
<LI>
<IMG SRC =」画像/ 003.JPG」ALT = "">
</ LI>
<LI>
<IMG SRC = "画像/ 004.jpg" ALT = "">
</ LI>
<LI>
<IMG SRC = "画像/ 005.JPG" ALT = "">
</ LI>
<LI>
<IMG SRC = "画像/ 006.jpg" ALT = "">
</ LI>
</ UL>
</ div>
</ div>
</ body>
</ HTML>
<CSS>
@charset "UTF-8";
* {
マージン：0。
パディング：0;
}
HTML、本体{
幅：100％。
高さ：100％;
背景画像：のURL（ "../画像/ timg.jpg"）;
背景リピート：なしリピート;
背景サイズ：100％100％。
}
.snow容器{
位置：固定されました。
トップ：0;
左：0;
下：0;
右：0;
幅：100％;
高さ：100％;
ポインタイベント：なし。
}
{.dongtai
幅：200pxの、
高さ：200pxの、
マージントップ：20％である。
マージン左：計算値（％20である- 100pxに）;
位置：絶対;
}
.UL、李{
マージン：0;
パディング：0;
}
。 {UL
幅：200pxの、
高さ：200pxの、
変換スタイル：保存-3D、
変換-起源：100pxに100pxに-100px;
/ *設定された回転中心点.ULキューブセンター* /
背景色：#FFF;
リスト-スタイル：なし;
位置：絶対;
アニメーション：ANI 10S無限代替;
変換：回転Xを（値は0deg）回転Y（値は0deg）;
}
のLi {
/ *インライン要素* /のためにインストール
フォントサイズ：60PX;
テキスト整列=左：センター。
表示：インラインブロック。
幅：200pxの;
高さ：200pxの;
位置：絶対;
国境：1pxのソリッドRGB（175、209、211）;
/ *境界線の幅とパディングと* /考慮した場合、ブラウザはボックスを解決することができます
ボックス-サイズ：BORDER-ボックス;
}
.dongtai .UL {リチウムIMGの
高さ：100％;
幅：100％;
}
のLi：の型第N - （1）{
背景サイズ：カバー;
左：0;
トップ：0;
}
のLi：N番目型-of（2）{
背景サイズ：カバー;
左：-200px;
トップ：0;
原点を変換：右;
アニメーション：無限代替boo2の10S;
}
（3）のLi N次の式{
バックグラウンドサイズ：カバー;
左：0;
トップ：0;
アニメーション：無限代替boo3の10秒;
}
リチウム：n番目の型（4）{
背景サイズ：カバー。
左：200pxの。
トップ：0;
変換-原点：左;
アニメーション：boo4 10S無限代替。
}
リチウム：n番目の型（5）{
背景サイズ：カバー。
左：0;
トップ：-200px;
変換-起源：下。
アニメーション：boo5 10S無限代替。
}
リチウム：n番目の型（6）{
背景サイズ：カバー。
左：0;
トップ：200pxの。
変換-起源：トップ。
アニメーション：boo6 10S無限代替。
}
@keyframesのboo2 {
0％{
変換：回転Y（値は0deg）。
}
20％{
変換：回転Y（-45deg）。
}
30％{
変換：回転Y（-90deg）。
}
100％{
変換：回転Y（-90deg）。
}
}
@keyframes boo3 {
0％{
変換：translateZ（-10px）回転Y（値は0deg）。
}
20％{
変換：translateZ（-100px）回転Y（-90deg）。
}
30％{
変換：translateZ（-200px）回転Y（-180deg）。
}
100％{
変換：translateZ（-200px）回転Y（-180deg）。
}
}
@keyframes boo4 {
0％{
変換：回転Y（値は0deg）を、
}
20％{
変換：回転Y（45deg）を、
}
30％{
変換：回転Y（90deg）。
}
100％{
変換：回転Y（90deg）。
}
}
@keyframes boo5 {
0％{
変換：回転X（値は0deg）を、
}
20％{
変換：回転X（45deg）。
}
30％{
変換：回転X（90deg）。
}
100％{
変換：回転X（90deg）。
}
}
@keyframes boo6 {
0％{
変換：回転X（値は0deg）を、
}
20％{
変換：回転X（-45deg）。
}
30％{
変換：回転X（-90deg）。
}
100％{
変換：回転X（-90deg）。
}
}
@keyframes ANI {
0％{
変換：回転X（値は0deg）回転Y（値は0deg）を、
}
10％{
変換：回転X（値は0deg）回転Y（値は0deg）を、
}
20％が{
変換：回転X（-45deg）回転Y（-45deg）。
}
30％が{
変換：回転X（-45deg）回転Y（-135deg）。
}
40％が{
変換：回転X（-45deg）回転Y（-215deg）。
}
50％が{
変換：回転X（-45deg）回転Y（-305deg）。
}
60％が{
変換：回転X（-45deg）回転Y（-395deg）。
}
70％が{
変換：回転X（-135deg）回転Y（-395deg）。
}
80％が{
変換：回転X（-225deg）回転Y（-395deg）。
}
90％{
変換：回転X（-315deg）回転Y（-395deg）。
}
100％{
変換：回転X（-405deg）回転Y（-395deg）。
}
}
.ziti {
テキスト整列：センター。
フォントサイズ：60PX;
位置：絶対;
マージントップ：100ピクセル;
マージン下：100pxに。
マージン左：計算値（50％ - 240ピクセル）。
}
スパン{
フォントファミリ：「微软雅黑」。
行の高さ：は50px;
/ *关键代码* /
背景画像：-webkit-線形勾配（左、＃147B96、＃E6D205 25％、RGB（196、30、30）が50％、RGB（41、197、111）75％、RGB （175、23、221））;
-webkit-テキストフィル色：透明;
-webkit-背景クリップ：テキスト。
-webkit-背景サイズ：200％100％。
-webkit-アニメーション：マスクされたアニメーション4S無限の直線。
}
/ *关键代码* /
@ -webkit-キーフレームマスクアニメーション{
0％{
背景位置：0。
}
100％{
背景位置：-100％0。
}
}