div+css实现一个三维烟嘴效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css实现一个三维烟嘴效果代码，鼠标移动可旋转。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html {
          font-size: 0.97vmin;
        }
        
        @media (min-width: 850px) and (max-width: 1200px) {
          html {
            font-size: 0.8vmin;
          }
        }
        @media (max-width: 950px) {
          rotate {
            transform: translate3d(0, 0, 0) rotate(-20deg) scale(0.9);
          }
        
          text {
            transform: translate3d(15rem, 85rem, 0) !important;
          }
        }
        @media (max-width: 850px) {
          rotate {
            transform: translate3d(-5rem, 0, 0) rotate(-21deg) scale(0.8);
          }
        
          text {
            transform: translate3d(27rem, 82rem, 0) !important;
          }
        }
        @media (max-width: 450px) {
          rotate {
            transform: rotate(-35deg);
          }
        
          text {
            transform: translate3d(24rem, 100rem, 0) !important;
          }
        }
        @media (max-width: 450px) and (max-height: 450px) {
          html {
            font-size: 0.8vmin;
          }
        }
        body {
          margin: auto;
          background: #ead9c9;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
        }
        body i,
        body i:before,
        body i:after {
          transform-style: preserve-3d;
          display: block;
          top: 0;
          left: 0;
          box-sizing: border-box;
          position: absolute;
          content: "";
          transition: all 0.5s ease-in-out;
        }
        
        body,
        html {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
        }
        
        art {
          transform-style: preserve-3d;
          perspective: 195rem;
          perspective-origin: 27% -14%;
          height: 100rem;
          width: 100%;
          max-width: 139rem;
        }
        
        xaxis,
        yaxis,
        art,
        rotate {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          transition: transform 0.5s ease-in-out;
          transform-style: preserve-3d;
        }
        
        @media (max-width: 600px) {
          pipe {
            transform: translate3d(12rem, 15rem, 10rem) rotateY(5deg) rotate(-90deg);
          }
        }
        x {
          width: calc(100% / 3);
          height: calc(100% / 3);
          z-index: 1;
        }
        
        .pic x {
          display: none;
        }
        
        body:after {
          content: "";
          top: 0;
          left: 0;
          position: absolute;
          width: 1rem;
          height: 1rem;
          border-radius: 50% 0;
          box-shadow: 42vw 18vh 0 #a06353 , 63vw 18vh 0 #b48072 , 69vw 26vh 0 #a06353 , 4vw 45vh 0 #b48072 , 47vw 62vh 0 #b48072 , 58vw 68vh 0 #b48072 , 59vw 25vh 0 #b48072 , 16vw 1vh 0 #a06353 , 5vw 93vh 0 #b48072 , 23vw 62vh 0 #b48072 , 24vw 81vh 0 #b48072 , 52vw 55vh 0 #b48072 , 26vw 69vh 0 #b48072 , 91vw 48vh 0 #b48072 , 79vw 4vh 0 #a06353 , 38vw 42vh 0 #b48072 , 77vw 26vh 0 #a06353 , 98vw 61vh 0 #a06353 , 90vw 65vh 0 #b48072 , 53vw 65vh 0 #b48072 , 26vw 52vh 0 #a06353 , 30vw 16vh 0 #a06353 , 25vw 58vh 0 #a06353 , 28vw 12vh 0 #a06353 , 9vw 27vh 0 #b48072 , 20vw 60vh 0 #a06353 , 59vw 47vh 0 #a06353 , 33vw 34vh 0 #b48072 , 9vw 46vh 0 #b48072 , 24vw 4vh 0 #b48072 , 96vw 11vh 0 #b48072 , 35vw 22vh 0 #a06353 , 64vw 23vh 0 #b48072 , 33vw 82vh 0 #b48072 , 43vw 30vh 0 #b48072 , 42vw 16vh 0 #a06353 , 48vw 59vh 0 #a06353 , 64vw 49vh 0 #a06353 , 90vw 45vh 0 #b48072 , 45vw 87vh 0 #a06353 , 69vw 27vh 0 #a06353 , 92vw 87vh 0 #b48072 , 17vw 88vh 0 #a06353 , 13vw 73vh 0 #a06353 , 3vw 58vh 0 #b48072 , 9vw 61vh 0 #a06353 , 17vw 45vh 0 #b48072 , 92vw 64vh 0 #b48072 , 60vw 74vh 0 #b48072 , 30vw 87vh 0 #a06353 , 60vw 22vh 0 #b48072 , 85vw 6vh 0 #b48072 , 49vw 66vh 0 #a06353 , 37vw 74vh 0 #a06353 , 6vw 100vh 0 #b48072 , 97vw 36vh 0 #a06353 , 47vw 16vh 0 #b48072 , 57vw 70vh 0 #a06353 , 36vw 15vh 0 #a06353 , 71vw 92vh 0 #a06353 , 80vw 80vh 0 #a06353 , 77vw 5vh 0 #b48072 , 34vw 83vh 0 #b48072 , 8vw 32vh 0 #b48072 , 46vw 72vh 0 #b48072 , 86vw 9vh 0 #b48072 , 92vw 33vh 0 #b48072 , 55vw 28vh 0 #b48072 , 26vw 74vh 0 #b48072 , 39vw 48vh 0 #b48072 , 75vw 43vh 0 #a06353 , 56vw 57vh 0 #a06353 , 54vw 16vh 0 #b48072 , 27vw 10vh 0 #a06353 , 71vw 52vh 0 #b48072 , 39vw 26vh 0 #b48072 , 95vw 90vh 0 #a06353 , 97vw 17vh 0 #a06353 , 76vw 69vh 0 #b48072 , 4vw 80vh 0 #a06353 , 20vw 37vh 0 #b48072 , 14vw 4vh 0 #a06353 , 87vw 89vh 0 #b48072 , 35vw 4vh 0 #a06353 , 57vw 39vh 0 #b48072 , 78vw 79vh 0 #a06353 , 17vw 58vh 0 #b48072 , 87vw 90vh 0 #b48072 , 6vw 43vh 0 #b48072 , 52vw 99vh 0 #a06353 , 96vw 94vh 0 #b48072 , 25vw 51vh 0 #b48072 , 80vw 65vh 0 #b48072 , 43vw 75vh 0 #a06353 , 60vw 75vh 0 #b48072 , 82vw 36vh 0 #b48072 , 41vw 74vh 0 #b48072 , 75vw 51vh 0 #a06353 , 21vw 68vh 0 #b48072 , 77vw 33vh 0 #a06353 , 94vw 39vh 0 #a06353 , 64vw 23vh 0 #b48072 , 18vw 71vh 0 #b48072 , 12vw 37vh 0 #a06353 , 65vw 33vh 0 #a06353 , 23vw 11vh 0 #a06353 , 43vw 77vh 0 #a06353 , 52vw 78vh 0 #b48072 , 94vw 88vh 0 #a06353 , 100vw 15vh 0 #b48072 , 97vw 89vh 0 #b48072 , 33vw 5vh 0 #a06353 , 13vw 81vh 0 #a06353 , 56vw 46vh 0 #a06353 , 65vw 72vh 0 #b48072 , 19vw 47vh 0 #b48072 , 24vw 43vh 0 #a06353 , 86vw 25vh 0 #b48072 , 71vw 95vh 0 #b48072 , 8vw 10vh 0 #b48072 , 25vw 45vh 0 #b48072 , 52vw 51vh 0 #b48072 , 35vw 94vh 0 #a06353 , 67vw 43vh 0 #b48072 , 37vw 25vh 0 #b48072 , 50vw 13vh 0 #b48072 , 4vw 88vh 0 #a06353 , 46vw 4vh 0 #a06353 , 55vw 46vh 0 #b48072 , 9vw 44vh 0 #b48072 , 65vw 9vh 0 #a06353 , 33vw 32vh 0 #a06353 , 7vw 3vh 0 #a06353 , 45vw 99vh 0 #a06353 , 32vw 12vh 0 #a06353 , 5vw 41vh 0 #b48072 , 56vw 86vh 0 #b48072 , 65vw 11vh 0 #a06353 , 94vw 17vh 0 #b48072 , 67vw 25vh 0 #b48072 , 91vw 11vh 0 #a06353 , 64vw 68vh 0 #a06353 , 76vw 18vh 0 #a06353 , 36vw 95vh 0 #a06353 , 29vw 25vh 0 #a06353 , 17vw 87vh 0 #a06353 , 25vw 50vh 0 #a06353 , 1vw 67vh 0 #a06353 , 39vw 17vh 0 #b48072 , 100vw 61vh 0 #a06353 , 88vw 16vh 0 #b48072 , 41vw 55vh 0 #b48072 , 8vw 11vh 0 #a06353 , 46vw 10vh 0 #a06353 , 78vw 9vh 0 #a06353 , 52vw 76vh 0 #b48072 , 10vw 16vh 0 #a06353 , 51vw 51vh 0 #a06353 , 67vw 9vh 0 #b48072 , 92vw 89vh 0 #a06353 , 52vw 80vh 0 #a06353 , 30vw 83vh 0 #b48072 , 85vw 82vh 0 #a06353 , 25vw 74vh 0 #b48072 , 66vw 70vh 0 #b48072 , 52vw 42vh 0 #a06353 , 100vw 57vh 0 #b48072 , 25vw 27vh 0 #a06353 , 32vw 19vh 0 #a06353 , 89vw 50vh 0 #b48072 , 61vw 95vh 0 #a06353 , 40vw 97vh 0 #b48072 , 18vw 58vh 0 #b48072 , 87vw 10vh 0 #a06353 , 66vw 49vh 0 #b48072 , 11vw 12vh 0 #b48072 , 14vw 14vh 0 #b48072 , 83vw 40vh 0 #a06353 , 10vw 75vh 0 #a06353 , 86vw 22vh 0 #a06353 , 49vw 2vh 0 #b48072 , 4vw 46vh 0 #b48072 , 37vw 76vh 0 #a06353 , 18vw 59vh 0 #a06353 , 23vw 56vh 0 #a06353 , 51vw 84vh 0 #b48072 , 52vw 80vh 0 #a06353 , 89vw 95vh 0 #b48072 , 4vw 61vh 0 #a06353 , 77vw 51vh 0 #b48072 , 48vw 27vh 0 #b48072 , 61vw 12vh 0 #a06353 , 43vw 38vh 0 #a06353 , 48vw 69vh 0 #a06353 , 27vw 75vh 0 #a06353 , 26vw 90vh 0 #a06353 , 44vw 17vh 0 #a06353 , 39vw 7vh 0 #a06353 , 14vw 7vh 0 #a06353 , 98vw 57vh 0 #b48072 , 97vw 52vh 0 #a06353 , 95vw 35vh 0 #b48072 , 13vw 26vh 0 #b48072 , 42vw 60vh 0 #a06353 , 36vw 49vh 0 #b48072 , 6vw 13vh 0 #b48072 , 56vw 97vh 0 #b48072 , 95vw 10vh 0 #a06353 , 28vw 36vh 0 #b48072 , 14vw 43vh 0 #b48072 , 24vw 70vh 0 #b48072 , 9vw 9vh 0 #a06353 , 31vw 4vh 0 #b48072 , 48vw 49vh 0 #a06353 , 94vw 28vh 0 #a06353 , 54vw 72vh 0 #a06353 , 76vw 78vh 0 #a06353 , 71vw 21vh 0 #b48072 , 51vw 22vh 0 #a06353 , 91vw 91vh 0 #b48072 , 43vw 69vh 0 #b48072 , 73vw 65vh 0 #b48072 , 90vw 24vh 0 #a06353 , 75vw 23vh 0 #a06353 , 58vw 42vh 0 #a06353 , 65vw 78vh 0 #a06353 , 72vw 6vh 0 #a06353 , 63vw 58vh 0 #a06353 , 75vw 38vh 0 #b48072 , 22vw 64vh 0 #b48072 , 81vw 25vh 0 #b48072 , 79vw 68vh 0 #a06353 , 8vw 40vh 0 #b48072 , 75vw 52vh 0 #a06353 , 99vw 67vh 0 #b48072 , 63vw 77vh 0 #b48072 , 26vw 65vh 0 #b48072 , 39vw 49vh 0 #b48072 , 97vw 4vh 0 #b48072 , 29vw 82vh 0 #a06353 , 14vw 12vh 0 #a06353 , 14vw 5vh 0 #b48072 , 11vw 41vh 0 #b48072 , 33vw 49vh 0 #b48072 , 65vw 92vh 0 #b48072 , 80vw 39vh 0 #a06353 , 60vw 78vh 0 #a06353 , 46vw 28vh 0 #b48072 , 2vw 77vh 0 #b48072 , 32vw 89vh 0 #b48072 , 61vw 96vh 0 #b48072 , 68vw 25vh 0 #b48072 , 32vw 45vh 0 #b48072 , 25vw 33vh 0 #b48072 , 85vw 17vh 0 #a06353 , 50vw 55vh 0 #a06353 , 24vw 12vh 0 #b48072 , 38vw 3vh 0 #b48072 , 83vw 34vh 0 #b48072 , 77vw 61vh 0 #a06353 , 53vw 86vh 0 #b48072 , 30vw 86vh 0 #a06353 , 4vw 47vh 0 #a06353 , 36vw 72vh 0 #b48072 , 42vw 3vh 0 #b48072 , 90vw 52vh 0 #b48072 , 77vw 20vh 0 #a06353 , 17vw 72vh 0 #b48072 , 69vw 46vh 0 #a06353 , 41vw 86vh 0 #a06353 , 12vw 11vh 0 #a06353 , 33vw 15vh 0 #b48072 , 42vw 12vh 0 #a06353 , 100vw 25vh 0 #a06353 , 71vw 79vh 0 #a06353 , 18vw 94vh 0 #b48072 , 59vw 76vh 0 #a06353 , 35vw 38vh 0 #b48072 , 21vw 81vh 0 #a06353 , 26vw 94vh 0 #a06353 , 93vw 3vh 0 #b48072 , 55vw 68vh 0 #b48072 , 97vw 77vh 0 #b48072 , 82vw 35vh 0 #a06353 , 94vw 29vh 0 #a06353 , 16vw 33vh 0 #b48072 , 57vw 69vh 0 #b48072 , 82vw 62vh 0 #a06353 , 7vw 22vh 0 #b48072 , 84vw 95vh 0 #b48072 , 62vw 22vh 0 #b48072 , 54vw 47vh 0 #a06353 , 5vw 9vh 0 #a06353 , 83vw 33vh 0 #b48072 , 97vw 7vh 0 #b48072 , 45vw 62vh 0 #b48072 , 36vw 86vh 0 #b48072 , 30vw 64vh 0 #a06353 , 100vw 38vh 0 #a06353 , 77vw 57vh 0 #a06353 , 40vw 39vh 0 #a06353 , 28vw 37vh 0 #b48072 , 81vw 69vh 0 #b48072 , 32vw 27vh 0 #a06353 , 67vw 96vh 0 #a06353 , 92vw 11vh 0 #a06353 , 74vw 80vh 0 #b48072 , 92vw 88vh 0 #a06353 , 57vw 4vh 0 #a06353 , 38vw 18vh 0 #b48072 , 59vw 52vh 0 #a06353 , 40vw 20vh 0 #a06353 , 19vw 80vh 0 #a06353 , 80vw 94vh 0 #b48072 , 34vw 91vh 0 #a06353 , 68vw 82vh 0 #a06353 , 49vw 38vh 0 #a06353 , 49vw 99vh 0 #b48072 , 15vw 28vh 0 #b48072 , 98vw 96vh 0 #a06353 , 6vw 85vh 0 #a06353 , 30vw 3vh 0 #a06353 , 16vw 68vh 0 #a06353 , 49vw 19vh 0 #b48072 , 72vw 80vh 0 #b48072 , 40vw 95vh 0 #a06353 , 24vw 43vh 0 #b48072 , 26vw 62vh 0 #a06353 , 83vw 63vh 0 #a06353 , 59vw 98vh 0 #b48072 , 48vw 98vh 0 #a06353 , 97vw 81vh 0 #b48072 , 59vw 20vh 0 #a06353 , 85vw 72vh 0 #a06353 , 30vw 99vh 0 #a06353 , 23vw 76vh 0 #b48072 , 77vw 43vh 0 #a06353 , 78vw 70vh 0 #b48072 , 8vw 3vh 0 #b48072 , 34vw 32vh 0 #b48072 , 25vw 17vh 0 #b48072 , 69vw 20vh 0 #b48072 , 2vw 24vh 0 #b48072 , 63vw 31vh 0 #a06353 , 63vw 94vh 0 #a06353 , 33vw 99vh 0 #a06353 , 56vw 85vh 0 #a06353 , 47vw 5vh 0 #a06353 , 54vw 49vh 0 #a06353 , 90vw 1vh 0 #b48072 , 2vw 5vh 0 #a06353 , 43vw 85vh 0 #b48072 , 41vw 12vh 0 #b48072 , 13vw 47vh 0 #a06353 , 71vw 97vh 0 #a06353 , 38vw 80vh 0 #b48072 , 96vw 60vh 0 #b48072 , 36vw 51vh 0 #a06353 , 77vw 50vh 0 #a06353 , 51vw 60vh 0 #b48072 , 51vw 35vh 0 #b48072 , 100vw 79vh 0 #b48072 , 92vw 97vh 0 #b48072 , 45vw 3vh 0 #a06353 , 96vw 56vh 0 #b48072 , 58vw 48vh 0 #a06353 , 86vw 17vh 0 #a06353 , 70vw 6vh 0 #b48072 , 23vw 59vh 0 #a06353 , 68vw 31vh 0 #b48072 , 59vw 7vh 0 #b48072 , 71vw 97vh 0 #b48072 , 26vw 43vh 0 #b48072 , 94vw 81vh 0 #b48072 , 97vw 82vh 0 #a06353 , 26vw 59vh 0 #a06353 , 90vw 79vh 0 #b48072 , 68vw 60vh 0 #b48072 , 32vw 3vh 0 #a06353 , 8vw 46vh 0 #a06353 , 43vw 92vh 0 #a06353 , 84vw 35vh 0 #a06353 , 38vw 23vh 0 #a06353 , 2vw 60vh 0 #b48072 , 48vw 90vh 0 #b48072 , 36vw 9vh 0 #a06353 , 89vw 5vh 0 #b48072 , 31vw 86vh 0 #a06353 , 28vw 34vh 0 #b48072 , 11vw 95vh 0 #b48072 , 32vw 57vh 0 #a06353 , 25vw 23vh 0 #a06353 , 89vw 61vh 0 #a06353 , 76vw 65vh 0 #b48072 , 84vw 74vh 0 #b48072 , 99vw 75vh 0 #b48072 , 79vw 59vh 0 #a06353 , 10vw 42vh 0 #b48072 , 19vw 68vh 0 #b48072 , 13vw 86vh 0 #a06353 , 2vw 58vh 0 #a06353 , 27vw 45vh 0 #a06353 , 95vw 59vh 0 #b48072 , 11vw 42vh 0 #a06353 , 49vw 100vh 0 #a06353 , 19vw 5vh 0 #a06353 , 43vw 30vh 0 #a06353 , 87vw 62vh 0 #a06353 , 37vw 4vh 0 #b48072 , 52vw 97vh 0 #a06353 , 3vw 41vh 0 #a06353 , 50vw 34vh 0 #a06353 , 63vw 6vh 0 #a06353 , 35vw 28vh 0 #b48072 , 50vw 76vh 0 #a06353 , 99vw 83vh 0 #a06353 , 10vw 97vh 0 #b48072 , 89vw 70vh 0 #a06353 , 41vw 61vh 0 #b48072 , 8vw 77vh 0 #a06353 , 47vw 23vh 0 #a06353 , 6vw 40vh 0 #a06353 , 49vw 4vh 0 #b48072 , 72vw 88vh 0 #b48072 , 43vw 89vh 0 #a06353 , 36vw 85vh 0 #b48072 , 12vw 72vh 0 #a06353 , 8vw 34vh 0 #a06353 , 83vw 90vh 0 #.........完整代码请登录后点击上方下载按钮下载查看