css实现三维营地露营效果代码-html代码-BFW代码库

css实现三维营地露营效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维营地露营效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
*:before,
*:after {
  position: absolute;
  content: "";
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: grid;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  place-items: center;
}

@keyframes rotate {
  from {
    transform: rotateX(65deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(65deg) rotateY(0deg) rotateZ(360deg);
  }
}
.floor {
  animation: rotate 20s infinite linear;
  width: 50vw;
  height: 50vw;
  padding: 10vw;
  background: #b9f5d8;
  place-self: center;
  transform: rotateX(65deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 50%;
}
.floor > .tent {
  width: 15vw;
  height: 10vw;
  background: #d8940d;
  position: relative;
}
.floor > .tent:before {
  transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);
  width: 15vw;
  height: 10vw;
  background: #f7c340;
  transform-origin: 50% 100%;
}
.floor > .tent:after {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
  width: 15vw;
  height: 10vw;
  background: #cf810e;
  transform-origin: 0 0;
}
.floor > .tree {
  transform-style: preserve-3d;
  width: 2vw;
  height: 2vw;
  background: transparent;
  position: relative;
}
.floor > .tree:before {
  width: 2vw;
  height: 10vw;
  background: #c97711;
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 0 0;
  top: 50%;
}
.floor > .tree:after {
  width: 2vw;
  height: 10vw;
  background: #c97711;
  transform: rotateX(90deg) rotate.........完整代码请登录后点击上方下载按钮下载查看