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

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の他の関連記事に注目してください。

<<: 

>>: 

推薦する

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

タブバーの切り替え効果を実現するJavaScript

タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...

Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

目次父から息子へ:息子から父へ: Vuex を使用せずにコンポーネント間で値を渡す方法は、親から子、...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

Nginx リバース プロキシ springboot jar パッケージ プロセス分析

Springboot プロジェクトをサーバーにデプロイする方法としては、war パッケージにパッケー...

MySQLはデータ復旧を実装するためにbinlogログを使用する

MySQL binlog は MySQL ログの中で非常に重要なログであり、データベースのすべての ...

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...

INS と DEL を使用してドキュメントの変更をマークする方法の詳細な説明

ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

jsオブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順

この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

yum インストールエラーの問題を解決する 保護されたマルチライブラリバージョン

現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...