CSS3アニメーションフラフープ例

CSS：
HTML、
本体{
背景：＃111。
幅：100vw。
高さ：100VH。
オーバーフロー：隠されました;
}
.wrapper {
位置：絶対。
幅：50vw。
高さ：50vw。
トップ：0;
左：0;
下：0;
右：0;
マージン：自動;
}
.grid {
ボーダー半径：100％。
位置：絶対;
幅：50vw。
高さ：50vw。
背景サイズ：20ピクセル20ピクセル;
ミックス・ブレンドモード：画面を、
}
.grid：n番目の子は、（1）{
アニメーション：線形無限に回転します。
背景画像：リニアグラジエント（＃1 F00の1ピクセル、透明な1ピクセル）。
アニメーションの継続時間：10秒。
アニメーション-遅延：0;
国境：固体1pxのの#FFF;
変換：回転X（50deg）回転Y（145deg）。
}
.grid：n番目の子（2）{
アニメーション：R1リニア無限。
背景画像：リニアグラジエント（＃1 F00の1ピクセル、透明な1ピクセル）。
アニメーションの継続時間：3秒;
アニメーション-遅延：0;
国境：固体1pxのの#FFF;
幅：40vw。
マージン：5vw。
高さ：40vw。
変換：回転X（50deg）回転Y（145deg）回転Z（値は0deg）translateZ（-2vw）。
}
@keyframesは{回転
{に
変換：回転X（50deg）回転Y（145deg）回転Z（360deg）。
}
}
r1は{@keyframes
に{
変換：回転X（50deg）回転Y（145deg）回転Z（360deg）translateZ（-2vw）。
}
}

HTML：
<DIV CLASS = "ラッパー">
<DIV CLASS = "グリッド"> </ div>
<divのクラス= "グリッド"> </ div>
</ div>