纯css打造文字三维城市和飞机绕飞效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：纯css打造文字三维城市和飞机绕飞效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
  width: 100vw;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  background: #c4e4e4;
  flex-wrap: wrap;
}
body * {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
body *:before, body *:after {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
body .cell {
  position: absolute;
  height: 2.5vh;
  width: 100vw;
  z-index: 999;
  cursor: pointer;
}
body .cell:focus ~ #wrap .plane .body .wrap, body .cell:active ~ #wrap .plane .body .wrap {
  -webkit-transform: rotateZ(720deg);
          transform: rotateZ(720deg);
}
body .cell:nth-of-type(1) {
  top: 0vh;
}
body .cell:nth-of-type(1):hover ~ #wrap {
  -webkit-transform: rotateX(69deg) translateY(245px) scale(0.75);
          transform: rotateX(69deg) translateY(245px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(2) {
  top: 2.5vh;
}
body .cell:nth-of-type(2):hover ~ #wrap {
  -webkit-transform: rotateX(68deg) translateY(240px) scale(0.75);
          transform: rotateX(68deg) translateY(240px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(3) {
  top: 5vh;
}
body .cell:nth-of-type(3):hover ~ #wrap {
  -webkit-transform: rotateX(67deg) translateY(235px) scale(0.75);
          transform: rotateX(67deg) translateY(235px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(4) {
  top: 7.5vh;
}
body .cell:nth-of-type(4):hover ~ #wrap {
  -webkit-transform: rotateX(66deg) translateY(230px) scale(0.75);
          transform: rotateX(66deg) translateY(230px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(5) {
  top: 10vh;
}
body .cell:nth-of-type(5):hover ~ #wrap {
  -webkit-transform: rotateX(65deg) translateY(225px) scale(0.75);
          transform: rotateX(65deg) translateY(225px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(6) {
  top: 12.5vh;
}
body .cell:nth-of-type(6):hover ~ #wrap {
  -webkit-transform: rotateX(64deg) translateY(220px) scale(0.75);
          transform: rotateX(64deg) translateY(220px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(7) {
  top: 15vh;
}
body .cell:nth-of-type(7):hover ~ #wrap {
  -webkit-transform: rotateX(63deg) translateY(215px) scale(0.75);
          transform: rotateX(63deg) translateY(215px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(8) {
  top: 17.5vh;
}
body .cell:nth-of-type(8):hover ~ #wrap {
  -webkit-transform: rotateX(62deg) translateY(210px) scale(0.75);
          transform: rotateX(62deg) translateY(210px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(9) {
  top: 20vh;
}
body .cell:nth-of-type(9):hover ~ #wrap {
  -webkit-transform: rotateX(61deg) translateY(205px) scale(0.75);
          transform: rotateX(61deg) translateY(205px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(10) {
  top: 22.5vh;
}
body .cell:nth-of-type(10):hover ~ #wrap {
  -webkit-transform: rotateX(60deg) translateY(200px) scale(0.75);
          transform: rotateX(60deg) translateY(200px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(11) {
  top: 25vh;
}
body .cell:nth-of-type(11):hover ~ #wrap {
  -webkit-transform: rotateX(59deg) translateY(195px) scale(0.75);
          transform: rotateX(59deg) translateY(195px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(12) {
  top: 27.5vh;
}
body .cell:nth-of-type(12):hover ~ #wrap {
  -webkit-transform: rotateX(58deg) translateY(190px) scale(0.75);
          transform: rotateX(58deg) translateY(190px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(13) {
  top: 30vh;
}
body .cell:nth-of-type(13):hover ~ #wrap {
  -webkit-transform: rotateX(57deg) translateY(185px) scale(0.75);
          transform: rotateX(57deg) translateY(185px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(14) {
  top: 32.5vh;
}
body .cell:nth-of-type(14):hover ~ #wrap {
  -webkit-transform: rotateX(56deg) translateY(180px) scale(0.75);
          transform: rotateX(56deg) translateY(180px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(15) {
  top: 35vh;
}
body .cell:nth-of-type(15):hover ~ #wrap {
  -webkit-transform: rotateX(55deg) translateY(175px) scale(0.75);
          transform: rotateX(55deg) translateY(175px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(16) {
  top: 37.5vh;
}
body .cell:nth-of-type(16):hover ~ #wrap {
  -webkit-transform: rotateX(54deg) translateY(170px) scale(0.75);
          transform: rotateX(54deg) translateY(170px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(17) {
  top: 40vh;
}
body .cell:nth-of-type(17):hover ~ #wrap {
  -webkit-transform: rotateX(53deg) translateY(165px) scale(0.75);
          transform: rotateX(53deg) translateY(165px) scale(0.75);
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}
body .cell:nth-of-type(18) {
  top: 42.5vh;
}
body .cell:nth-of-type(18):hover ~ #wrap {
  -webkit-transform: rotateX(52deg) translateY(160px) scal.........完整代码请登录后点击上方下载按钮下载查看