在CSS3中，我们可以实现3D的效果，但是一些刚接触CSS3的朋友，可能不知道css3的3d效果该怎样做，因此这篇文章就给大家分享一下用css3做3D隧道效果的示例，感兴趣的朋友可以参考，接下来我们一起看看吧。

    实现的效果

    实现代码

    html

<div class="scene">
  <div class="wrapper">
    <ul class="tunnel">
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
    </ul>
  </div>
</div>

    css3

@keyframes roundandround {
  to {
    transform: rotateX(360deg);
  }
}
body {
  background-color: #000000;
}

.scene {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  perspective: 500px;
}

.wrapper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(300px);
}

.tunnel {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: roundandround 10s infinite linear;
}

.tunnel .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 6px;
  border-style: dashed;
  border-radius: 50%;
  transform-origin: 50% 50%;
  color: #8df435;
  transform: translateY(-200px);
}

/* SASS optimisation thanks to @imjared */
.ring:nth-child(1) {
  color: #ff1500;
  transform: rotateX(5deg) translateY(-200px);
}

.ring:nth-child(2) {
  color: #ff2b00;
  transform: rotateX(10deg) translateY(-200px);
}

.ring:nth-child(3) {
  color: #ff4000;
  transform: rotateX(15deg) translateY(-200px);
}

.ring:nth-child(4) {
  color: #ff5500;
  transform: rotateX(20deg) translateY(-200px);
}

.ring:nth-child(5) {
  color: #ff6a00;
  transform: rotateX(25deg) translateY(-200px);
}

.ring:nth-child(6) {
  color: #ff8000;
  transform: rotateX(30deg) translateY(-200px);
}

.ring:nth-child(7) {
  color: #ff9500;
  transform: rotateX(35deg) translateY(-200px);
}

.ring:nth-child(8) {
  color: #ffaa00;
  transform: rotateX(40deg) translateY(-200px);
}

.ring:nth-child(9) {
  color: #ffbf00;
  transform: rotateX(45deg) translateY(-200px);
}

.ring:nth-child(10) {
  color: #ffd500;
  transform: rotateX(50deg) translateY(-200px);
}

.ring:nth-child(11) {
  color: #ffea00;
  transform: rotateX(55deg) translateY(-200px);
}

.ring:nth-child(12) {
  color: yellow;
  transform: rotateX(60deg) translateY(-200px);
}

.ring:nth-child(13) {
  color: #eaff00;
  transform: rotateX(65deg) translateY(-200px);
}

.ring:nth-child(14) {
  color: #d5ff00;
  transform: rotateX(70deg) translateY(-200px);
}

.ring:nth-child(15) {
  color: #bfff00;
  transform: rotateX(75deg) translateY(-200px);
}

.ring:nth-child(16) {
  color: #aaff00;
  transform: rotateX(80deg) translateY(-200px);
}

.ring:nth-child(17) {
  color: #95ff00;
  transform: rotateX(85deg) translateY(-200px);
}

.ring:nth-child(18) {
  color: #80ff00;
  transform: rotateX(90deg) translateY(-200px);
}

.ring:nth-child(19) {
  color: #6aff00;
  transform: rotateX(95deg) translateY(-200px);
}

.ring:nth-child(20) {
  color: #55ff00;
  transform: rotateX(100deg) translateY(-200px);
}

.ring:nth-child(21) {
  color: #40ff00;
  transform: rotateX(105deg) translateY(-200px);
}

.ring:nth-child(22) {
  color: #2bff00;
  transform: rotateX(110deg) translateY(-200px);
}

.ring:nth-child(23) {
  color: #15ff00;
  transform: rotateX(115deg) translateY(-200px);
}

.ring:nth-child(24) {
  color: lime;
  transform: rotateX(120deg) translateY(-200px);
}

.ring:nth-child(25) {
  color: #00ff15;
  transform: rotateX(125deg) translateY(-200px);
}

.ring:nth-child(26) {
  color: #00ff2b;
  transform: rotateX(130deg) translateY(-200px);
}

.ring:nth-child(27) {
  color: #00ff40;
  transform: rotateX(135deg) translateY(-200px);
}

.ring:nth-child(28) {
  color: #00ff55;
  transform: rotateX(140deg) translateY(-200px);
}

.ring:nth-child(29) {
  color: #00ff6a;
  transform: rotateX(145deg) translateY(-200px);
}

.ring:nth-child(30) {
  color: #00ff80;
  transform: rotateX(150deg) translateY(-200px);
}

.ring:nth-child(31) {
  color: #00ff95;
  transform: rotateX(155deg) translateY(-200px);
}

.ring:nth-child(32) {
  color: #00ffaa;
  transform: rotateX(160deg) translateY(-200px);
}

.ring:nth-child(33) {
  color: #00ffbf;
  transform: rotateX(165deg) translateY(-200px);
}

.ring:nth-child(34) {
  color: #00ffd5;
  transform: rotateX(170deg) translateY(-200px);
}

.ring:nth-child(35) {
  color: #00ffea;
  transform: rotateX(175deg) translateY(-200px);
}

.ring:nth-child(36) {
  color: cyan;
  transform: rotateX(180deg) translateY(-200px);
}

.ring:nth-child(37) {
  color: #00eaff;
  transform: rotateX(185deg) translateY(-200px);
}

.ring:nth-child(38) {
  color: #00d5ff;
  transform: rotateX(190deg) translateY(-200px);
}

.ring:nth-child(39) {
  color: deepskyblue;
  transform: rotateX(195deg) translateY(-200px);
}

.ring:nth-child(40) {
  color: #00aaff;
  transform: rotateX(200deg) translateY(-200px);
}

.ring:nth-child(41) {
  color: #0095ff;
  transform: rotateX(205deg) translateY(-200px);
}

.ring:nth-child(42) {
  color: #0080ff;
  transform: rotateX(210deg) translateY(-200px);
}

.ring:nth-child(43) {
  color: #006aff;
  transform: rotateX(215deg) translateY(-200px);
}

.ring:nth-child(44) {
  color: #0055ff;
  transform: rotateX(220deg) translateY(-200px);
}

.ring:nth-child(45) {
  color: #0040ff;
  transform: rotateX(225deg) translateY(-200px);
}

.ring:nth-child(46) {
  color: #002bff;
  transform: rotateX(230deg) translateY(-200px);
}

.ring:nth-child(47) {
  color: #0015ff;
  transform: rotateX(235deg) translateY(-200px);
}

.ring:nth-child(48) {
  color: blue;
  transform: rotateX(240deg) translateY(-200px);
}

.ring:nth-child(49) {
  color: #1500ff;
  transform: rotateX(245deg) translateY(-200px);
}

.ring:nth-child(50) {
  color: #2b00ff;
  transform: rotateX(250deg) translateY(-200px);
}

.ring:nth-child(51) {
  color: #4000ff;
  transform: rotateX(255deg) translateY(-200px);
}

.ring:nth-child(52) {
  color: #5500ff;
  transform: rotateX(260deg) translateY(-200px);
}

.ring:nth-child(53) {
  color: #6a00ff;
  transform: rotateX(265deg) translateY(-200px);
}

.ring:nth-child(54) {
  color: #8000ff;
  transform: rotateX(270deg) translateY(-200px);
}

.ring:nth-child(55) {
  color: #9500ff;
  transform: rotateX(275deg) translateY(-200px);
}

.ring:nth-child(56) {
  color: #aa00ff;
  transform: rotateX(280deg) translateY(-200px);
}

.ring:nth-child(57) {
  color: #bf00ff;
  transform: rotateX(285deg) translateY(-200px);
}

.ring:nth-child(58) {
  color: #d500ff;
  transform: rotateX(290deg) translateY(-200px);
}

.ring:nth-child(59) {
  color: #ea00ff;
  transform: rotateX(295deg) translateY(-200px);
}

.ring:nth-child(60) {
  color: magenta;
  transform: rotateX(300deg) translateY(-200px);
}

.ring:nth-child(61) {
  color: #ff00ea;
  transform: rotateX(305deg) translateY(-200px);
}

.ring:nth-child(62) {
  color: #ff00d5;
  transform: rotateX(310deg) translateY(-200px);
}

.ring:nth-child(63) {
  color: #ff00bf;
  transform: rotateX(315deg) translateY(-200px);
}

.ring:nth-child(64) {
  color: #ff00aa;
  transform: rotateX(320deg) translateY(-200px);
}

.ring:nth-child(65) {
  color: #ff0095;
  transform: rotateX(325deg) translateY(-200px);
}

.ring:nth-child(66) {
  color: #ff0080;
  transform: rotateX(330deg) translateY(-200px);
}

.ring:nth-child(67) {
  color: #ff006a;
  transform: rotateX(335deg) translateY(-200px);
}

.ring:nth-child(68) {
  color: #ff0055;
  transform: rotateX(340deg) translateY(-200px);
}

.ring:nth-child(69) {
  color: #ff0040;
  transform: rotateX(345deg) translateY(-200px);
}

.ring:nth-child(70) {
  color: #ff002b;
  transform: rotateX(350deg) translateY(-200px);
}

.ring:nth-child(71) {
  color: #ff0015;
  transform: rotateX(355deg) translateY(-200px);
}

.ring:nth-child(72) {
  color: red;
  transform: rotateX(360deg) translateY(-200px);
}

    以上就是关于css3的3d效果实现的内容，上述实现3D隧道效果的实例对新手学习和理解CSS3的使用有一定帮助，有需要的朋友可以参考学习，想要了解更多CSS3实现3D效果的方法技巧，大家可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS流式布局怎么实现，思路及代码是什么

  css流式布局的介绍：1、流式布局使用非固定像素来定义网页内容，即百分比布局。2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

• 用CSS实现页脚保持在网页底部怎样做？

  用CSS实现页脚保持在网页底部怎样做？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• 利用Canvas如何制作抠图功能，方法是什么

  这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS如何实现动画效果，哪些基础知识要掌握

  本篇文章带大家深入解析一下如何实现动画效果，通过动画来快速学习 css ，希望对大家有所帮助！

• 用纯CSS3如何制作最基本的翻转效果，代码是什么

  这篇文章主要介绍了简单几步用纯CSS3实现3D翻转效果的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧