CSS3で実装された3Dトンネル効果

達成された効果

実装コード

html

<div class="scene">
  <div class="wrapper">
    <ul class="トンネル">
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
      <li class="リング"></li>
    </ul>
  </div>
</div>

CSS3

@keyframes ラウンドアンドラウンド {
  に {
    変換: rotateX(360deg);
  }
}
体 {
  背景色: #000000;
}

。シーン {
  幅: 600ピクセル;
  高さ: 600px;
  マージン: 0 自動;
  パースペクティブ: 500px;
}

.ラッパー{
  幅: 100%;
  高さ: 100%;
  変換スタイル: 3D を保持します。
  変換: 回転Y(0度) 移動Z(300ピクセル);
}

.トンネル{
  位置: 相対的;
  幅: 200ピクセル;
  高さ: 200px;
  マージン: 0 自動;
  変換スタイル: 3D を保持します。
  アニメーション: roundandround 10s 無限線形;
}

.トンネル .リング {
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  境界線: 6px;
  境界線スタイル: 破線;
  境界線の半径: 50%;
  変換の原点: 50% 50%;
  色: #8df435;
  変換: translateY(-200px);
}

/* SASS の最適化は @imjared のおかげです */
.ring:n番目の子(1) {
  色: #ff1500;
  変換: 回転X(5度) 移動Y(-200px);
}

.ring:n番目の子(2) {
  色: #ff2b00;
  変換: 回転X(10度) 移動Y(-200px);
}

.ring:n番目の子(3) {
  色: #ff4000;
  変換: 回転X(15度) 移動Y(-200px);
}

.ring:n番目の子(4) {
  色: #ff5500;
  変換: 回転X(20度) 移動Y(-200ピクセル);
}

.ring:n番目の子(5) {
  色: #ff6a00;
  変換: 回転X(25度) 移動Y(-200px);
}

.ring:n番目の子(6) {
  色: #ff8000;
  変換: 回転X(30度) 移動Y(-200px);
}

.ring:n番目の子(7) {
  色: #ff9500;
  変換: 回転X(35度) 移動Y(-200px);
}

.ring:n番目の子(8) {
  色: #ffaa00;
  変換: 回転X(40度) 移動Y(-200px);
}

.ring:n番目の子(9) {
  色: #ffbf00;
  変換: 回転X(45度) 移動Y(-200px);
}

.ring:n番目の子(10) {
  色: #ffd500;
  変換: 回転X(50度) 移動Y(-200px);
}

.ring:n番目の子(11) {
  色: #ffea00;
  変換: 回転X(55度) 移動Y(-200ピクセル);
}

.ring:n番目の子(12) {
  色: 黄色;
  変換: 回転X(60度) 移動Y(-200ピクセル);
}

.ring:n番目の子(13) {
  色: #eaff00;
  変換: 回転X(65度) 移動Y(-200px);
}

.ring:n番目の子(14) {
  色: #d5ff00;
  変換: 回転X(70度) 移動Y(-200ピクセル);
}

.ring:n番目の子(15) {
  色: #bfff00;
  変換: 回転X(75度) 移動Y(-200ピクセル);
}

.ring:n番目の子(16) {
  色: #aaff00;
  変換: 回転X(80度) 移動Y(-200px);
}

.ring:n番目の子(17) {
  色: #95ff00;
  変換: 回転X(85度) 移動Y(-200ピクセル);
}

.ring:n番目の子(18) {
  色: #80ff00;
  変換: 回転X(90度) 移動Y(-200px);
}

.ring:n番目の子(19) {
  色: #6aff00;
  変換: 回転X(95度) 移動Y(-200px);
}

.ring:n番目の子(20) {
  色: #55ff00;
  変換: 回転X(100度) 移動Y(-200ピクセル);
}

.ring:n番目の子(21) {
  色: #40ff00;
  変換: 回転X(105度) 移動Y(-200ピクセル);
}

.ring:n番目の子(22) {
  色: #2bff00;
  変換: 回転X(110度) 移動Y(-200ピクセル);
}

.ring:n番目の子(23) {
  色: #15ff00;
  変換: 回転X(115度) 移動Y(-200ピクセル);
}

.ring:n番目の子(24) {
  色: ライム;
  変換: 回転X(120度) 移動Y(-200ピクセル);
}

.ring:n番目の子(25) {
  色: #00ff15;
  変換: 回転X(125度) 移動Y(-200ピクセル);
}

.ring:n番目の子(26) {
  色: #00ff2b;
  変換: 回転X(130度) 移動Y(-200ピクセル);
}

.ring:n番目の子(27) {
  色: #00ff40;
  変換: 回転X(135度) 移動Y(-200ピクセル);
}

.ring:n番目の子(28) {
  色: #00ff55;
  変換: 回転X(140度) 移動Y(-200ピクセル);
}

.ring:n番目の子(29) {
  色: #00ff6a;
  変換: 回転X(145度) 移動Y(-200ピクセル);
}

.ring:n番目の子(30) {
  色: #00ff80;
  変換: 回転X(150度) 移動Y(-200ピクセル);
}

.ring:n番目の子(31) {
  色: #00ff95;
  変換: 回転X(155度) 移動Y(-200ピクセル);
}

.ring:n番目の子(32) {
  色: #00ffaa;
  変換: 回転X(160度) 移動Y(-200ピクセル);
}

.ring:n番目の子(33) {
  色: #00ffbf;
  変換: 回転X(165度) 移動Y(-200ピクセル);
}

.ring:n番目の子(34) {
  色: #00ffd5;
  変換: 回転X(170度) 移動Y(-200ピクセル);
}

.ring:n番目の子(35) {
  色: #00ffea;
  変換: 回転X(175度) 移動Y(-200ピクセル);
}

.ring:n番目の子(36) {
  色: シアン;
  変換: 回転X(180度) 移動Y(-200ピクセル);
}

.ring:n番目の子(37) {
  色: #00eaff;
  変換: 回転X(185度) 移動Y(-200ピクセル);
}

.ring:n番目の子(38) {
  色: #00d5ff;
  変換: 回転X(190度) 移動Y(-200ピクセル);
}

.ring:n番目の子(39) {
  色:ディープスカイブルー;
  変換: 回転X(195度) 移動Y(-200ピクセル);
}

.ring:n番目の子(40) {
  色: #00aaff;
  変換: 回転X(200度) 移動Y(-200ピクセル);
}

.ring:n番目の子(41) {
  色: #0095ff;
  変換: 回転X(205度) 移動Y(-200ピクセル);
}

.ring:n番目の子(42) {
  色: #0080ff;
  変換: 回転X(210度) 移動Y(-200ピクセル);
}

.ring:n番目の子(43) {
  色: #006aff;
  変換: 回転X(215度) 移動Y(-200ピクセル);
}

.ring:n番目の子(44) {
  色: #0055ff;
  変換: 回転X(220度) 移動Y(-200ピクセル);
}

.ring:n番目の子(45) {
  色: #0040ff;
  変換: 回転X(225度) 移動Y(-200ピクセル);
}

.ring:n番目の子(46) {
  色: #002bff;
  変換: 回転X(230度) 移動Y(-200ピクセル);
}

.ring:n番目の子(47) {
  色: #0015ff;
  変換: 回転X(235度) 移動Y(-200ピクセル);
}

.ring:n番目の子(48) {
  色: 青;
  変換: 回転X(240度) 移動Y(-200ピクセル);
}

.ring:n番目の子(49) {
  色: #1500ff;
  変換: 回転X(245度) 移動Y(-200ピクセル);
}

.ring:n番目の子(50) {
  色: #2b00ff;
  変換: 回転X(250度) 移動Y(-200ピクセル);
}

.ring:n番目の子(51) {
  色: #4000ff;
  変換: 回転X(255度) 移動Y(-200ピクセル);
}

.ring:n番目の子(52) {
  色: #5500ff;
  変換: 回転X(260度) 移動Y(-200ピクセル);
}

.ring:n番目の子(53) {
  色: #6a00ff;
  変換: 回転X(265度) 移動Y(-200ピクセル);
}

.ring:n番目の子(54) {
  色: #8000ff;
  変換: 回転X(270度) 移動Y(-200ピクセル);
}

.ring:n番目の子(55) {
  色: #9500ff;
  変換: 回転X(275度) 移動Y(-200ピクセル);
}

.ring:n番目の子(56) {
  色: #aa00ff;
  変換: 回転X(280度) 移動Y(-200ピクセル);
}

.ring:n番目の子(57) {
  色: #bf00ff;
  変換: 回転X(285度) 移動Y(-200ピクセル);
}

.ring:n番目の子(58) {
  色: #d500ff;
  変換: 回転X(290度) 移動Y(-200ピクセル);
}

.ring:n番目の子(59) {
  色: #ea00ff;
  変換: 回転X(295度) 移動Y(-200ピクセル);
}

.ring:n番目の子(60) {
  色: マゼンタ;
  変換: 回転X(300度) 移動Y(-200ピクセル);
}

.ring:n番目の子(61) {
  色: #ff00ea;
  変換: 回転X(305度) 移動Y(-200ピクセル);
}

.ring:n番目の子(62) {
  色: #ff00d5;
  変換: 回転X(310度) 移動Y(-200ピクセル);
}

.ring:n番目の子(63) {
  色: #ff00bf;
  変換: 回転X(315度) 移動Y(-200ピクセル);
}

.ring:n番目の子(64) {
  色: #ff00aa;
  変換: 回転X(320度) 移動Y(-200ピクセル);
}

.ring:n番目の子(65) {
  色: #ff0095;
  変換: 回転X(325度) 移動Y(-200ピクセル);
}

.ring:n番目の子(66) {
  色: #ff0080;
  変換: 回転X(330度) 移動Y(-200ピクセル);
}

.ring:n番目の子(67) {
  色: #ff006a;
  変換: 回転X(335度) 移動Y(-200ピクセル);
}

.ring:n番目の子(68) {
  色: #ff0055;
  変換: 回転X(340度) 移動Y(-200ピクセル);
}

.ring:n番目の子(69) {
  色: #ff0040;
  変換: 回転X(345度) 移動Y(-200ピクセル);
}

.ring:n番目の子(70) {
  色: #ff002b;
  変換: 回転X(350度) 移動Y(-200ピクセル);
}

.ring:n番目の子(71) {
  色: #ff0015;
  変換: 回転X(355度) 移動Y(-200ピクセル);
}

.ring:n番目の子(72) {
  色: 赤;
  変換: 回転X(360度) 移動Y(-200ピクセル);
}

以上がCSS3で実装した3Dトンネル効果の詳細です。CSS3 3Dトンネル効果の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:

>>: