<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<メタ文字コード= "UTF-8">
<タイトル> 3D旋转</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {パディング：0 ;
マージン：0;}
体、HTML {高さ：100％;}
体{背景画像：URL（ "画像/ 8.jpg"）;背景サイズ：100％100％;}
#box {幅：280px;
高さ：400ピクセル;
位置：固定;
左：0;
右：0;
トップ：0;
下：0;
マージン：自動;
トランスフォームスタイル：保存-3D。
変換：回転X（は0deg）回転Y（は0deg）。
アニメーション：45Sに線形無限に行きます。
}
#boxのIMG {幅：280px;
高さ：400ピクセル;
ポジション：絶対の;
左：0;
トップ：0;
}
#boxのIMG：n番目の子（1）{
変換：回転Yは、（は0deg）translateZ（650px）;}
#boxのIMG：n番目の子（2）{
変換：回転Y（36deg）translateZ（650px）;}
#box IMG ：n番目の子（3）{
変換：回転Y（72deg）translateZ（650px）;}
#boxのIMG：n番目の子を（4）{
変換：回転Y（108deg）translateZ（650px）;}
#boxのIMG：n番目の子（5）{
変換：回転Y（144deg）translateZ（650px）;}
#boxのIMG：n番目の子（6）{
変換：回転Y（原稿180°）translateZ（650px）;}
#boxのIMG：n番目の子（7）{
変換：回転Y（216deg）translateZ（650px）;}
#boxのIMG：n番目の子（8）{
変換：回転Y（252deg）translateZ（650px）;}
#boxのIMG：n番目の子（9）{
変換：回転Y（288deg）translateZ（650px）;}
#boxのIMG：n番目の子（10）{
変換;回転Y（324deg）translateZ（650px）が}
{行く@keyframes
：回転Xは、（は0deg）回転Y（変換{0％を0deg）;}
25％{変換：回転X（20deg）回転Y（原稿180°）;}
50％{変換：回転X（値は0deg）回転Y（360deg）;}
75％{変換：回転X（-20deg）回転Y（540deg）;}
100％{変換：回転X（値は0deg）回転Y（720deg）;}
}
</スタイル>
</ head>
<body>
<DIV ID = "ボックス">
<IMG SRC = "照片1">
<IMG SRC = "照片2 ">
<IMG SRC ="照片3 ">
<IMG SRC ="照片4 ">
<IMG SRC ="照片5 ">
<IMG SRC ="照片6">
<IMG SRC = "写真7">
<IMG SRC = "写真8">
<IMG srcは= "9枚の写真">
<IMG SRC = "照片10">
</ div>
</ BODY>
</ HTML>