ダブルキューブキュービックCSS3

このようなものは、しかしシナリオを見つけるように見えるが、実際のように言って

HTMLコード：

1  <！ - 立方体容器- > 
2      < divのクラス= "box_case" > 
3          <！ - 小立方体- > 
4          < divのクラス= "small_box" > < IMG SRC =」./ IMG / 1A.png "  > </ DIV > 
5          < DIV クラス=" small_box " > < IMG SRC =" ./ IMG / 1B.png」 > </ DIV > 
6          < DIV クラス= "small_box" > <IMG SRC = "./ IMG / 1L.png"  > </ divの> 
7          < DIV クラス= "small_box" > < IMG SRC = "./ IMG / 1O.png"  > </ DIV > 
8          < DIV クラス= "small_box" > < IMG SRC = "./ IMG / 1V.png"  > </ divの> 
9          < divのクラス= "small_box" > < IMG SRC = "./ IMG / 1E.png"  > </ divの> 
10  
11          <！ - 大立方体- > 
12          <div クラス= "big_box" > < IMGSRC = "./ IMG / 2A.png"  > </ DIV > 
13          < DIV クラス= "big_box" > < IMG SRC = "./ IMG / 21.png"  > </ DIV > 
14          < DIV クラス= "big_box " > < IMG SRC =" ./ IMG / 22.png "  > </ DIV > 
15          < DIV クラス= "big_box" > < IMG SRC =" ./ IMG / 23.png」 > </ DIV > 
16          <div クラス= "big_box" > < IMG SRC= "./ IMG / 24.png"  > </ DIV > 
17          < DIV クラス= "big_box" > < IMG SRC = "./ IMG / 25.png"  > </ DIV > 
18  
19      </ DIV >

CSSコード：

/ * 立方体容器* / 
.box_case { 
  幅：100pxに。
  高さ：100pxに。
  マージン：200pxの自動 ; 
  位置：相対 ; 
  トランスフォームスタイル：保存-3D。
  アニメーション：回転リニア5S無限。
}

/ * キューブアニメーション* / 
@keyframes回し {
  {から
    変換：回転X（は0deg）回転Y（は0deg） 。
  }
{ 
    変換：回転X（720deg）回転Y（360deg） 。
  }
}

/ * キューブ位置の小サイズ* / 
.box_case .small_box { 
  幅：は50px ; 
  高さ：は50px ; 
  位置：絶対 ; 
  ボーダー：1ピクセルピンク色の固体 ; 
  トップ：20ピクセル ; 
  左：20ピクセル。
}

.box_case .small_box IMG { 
  幅：は50px。
  高さ：は50px ;
}

/ * 立方体の6つの面の完了* / 
.box_case .small_box：テラス、N番目（1） { 
  変換：回転X（90deg）translateZ（25ピクセル）。
}

.box_case .small_box：n番目の子（2） { 
  変換：回転Xを（-90deg）translateZ（25ピクセル）。
}

.box_case .small_box：n番目の子（3） { 
  変換：translateZ（25ピクセル）を、
}

.box_case .small_box：n番目の子（4） { 
  変換：回転Yを（90deg）translateZ（25ピクセル）。
}

.box_case .small_box：n番目の子（5） { 
  変換：回転Yを（原稿180°）translateZ（25ピクセル）。
}

.box_case .small_box：n番目の子（6） { 
  変換：回転Yを（-90deg）translateZ（25ピクセル）。
}

/ * キューブ位置のビッグサイズ* / 
.box_case .big_box { 
  幅：100ピクセル ; 
  高さ：100pxに ; 
  マージン：0自動 ; 
  国境：1pxのソリッドDeepPink ; 
  位置：絶対 ; 
  トップ：0PX ; 
  左：0PX ; 
  変遷：すべて.4s。
}

.box_case .big_box IMG { 
  幅：100pxに。
  高さ：100pxに。
}

/ * 大きな立方体の6つの面の完了* / 
.box_case .big_box：テラス、N番目（7） { 
  変換：回転X（90deg）translateZ（は50px） 。
}

.box_case .big_box：n番目の子（8） { 
  変換：回転Xを（-90deg）translateZ（は50px） 。
}

.box_case .big_box：n番目の子（9） { 
  変換：translateZ（は50px）を、
}

.box_case .big_box：n番目の子（10） { 
  変換：回転Yを（90deg）translateZ（は50px） 。
}

.box_case .big_box：n番目の子（11） { 
  変換：回転Yを（原稿180°）translateZ（は50px） 。
}

.box_case .big_box：n番目の子（12） { 
  変換：回転Yを（-90deg）translateZ（は50px） 。
}

/ * 大きなキューブホバーを変更し、それぞれの顔があること* / 
テラス第N：ホバー.big_box：.box_case（7） { 
  変換：回転X（90deg）translateZ（100ピクセル）。
}

.box_case：ホバー.big_box：n番目の子（8） { 
  変換：回転X（-90deg）translateZ（100pxにします）。
}

.box_case：ホバー.big_box：n番目の子（9） { 
  変換：translateZ（100ピクセル）を、
}

.box_case：ホバー.big_box：n番目の子（10） { 
  変換：回転Y（90deg）translateZ（100ピクセル）。
}

.box_case：ホバー.big_box：n番目の子（11） { 
  変換：回転Y（原稿180°）translateZ（100pxにします）。
}

.box_case：ホバー.big_box：n番目の子（12） { 
  変換：回転Y（-90deg）translateZ（100pxにします）。
}

業績：

ダブルキューブキュービックCSS3

おすすめ