纯CSS 3D房间

下载代码

html

css

分享到微信朋友圈

html

css

html {
  font-size: 1vh;
  width: 100%;
  height: 100%;
}

body {
  perspective: 50rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
body,
body *,
body *:before,
body *:after {
  transform-style: preserve-3d;
  box-sizing: border-box;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
}

i {
  width: calc(100% / 13);
  height: 100%;
  position: relative;
  z-index: 1;
}

i:nth-of-type(1):hover ~ x {
  transform: rotateY(-240deg);
}

i:nth-of-type(2):hover ~ x {
  transform: rotateY(-230deg);
}

i:nth-of-type(3):hover ~ x {
  transform: rotateY(-220deg);
}

i:nth-of-type(4):hover ~ x {
  transform: rotateY(-210deg);
}

i:nth-of-type(5):hover ~ x {
  transform: rotateY(-200deg);
}

i:nth-of-type(6):hover ~ x {
  transform: rotateY(-190deg);
}

i:nth-of-type(7):hover ~ x {
  transform: rotateY(-180deg);
}

i:nth-of-type(8):hover ~ x {
  transform: rotateY(-170deg);
}

i:nth-of-type(9):hover ~ x {
  transform: rotateY(-160deg);
}

i:nth-of-type(10):hover ~ x {
  transform: rotateY(-150deg);
}

i:nth-of-type(11):hover ~ x {
  transform: rotateY(-140deg);
}

i:nth-of-type(12):hover ~ x {
  transform: rotateY(-130deg);
}

i:nth-of-type(13):hover ~ x {
  transform: rotateY(-120deg);
}

x,
y {
  position: absolute;
  top: -80rem;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  transition: 0.25s ease-in-out;
}

floor, floor:before, floor:after,
ceiling,
ceiling:before,
ceiling:after {
  width: 300rem;
  height: 300rem;
  box-shadow: 0 0 1rem #0b0d0c;
}

floor {
  background: radial-gradient(#c49d71, #361f0e);
  transform: rotateX(90deg) translate3d(-150rem, 0, -50rem);
}
floor:before, floor:after {
  background: radial-gradient(circle at center top, #7f95a8, #0b0d0c);
}
floor:before {
  transform: rotateY(90deg) translate3d(-150rem, 0, -150rem);
}
floor:after {
  transform: rotateY(-90deg) translate3d(150rem, 0, -150rem);
}

ceiling {
  background: radial-gradient(#fff, #7f95a8);
  transform: rotateX(90deg) translate3d(-150rem, 0, 200rem);
}
ceiling:before, ceiling:after {
  background: radial-gradient(circle at center bottom, #7f95a8, #0b0d0c);
}
ceiling:before {
  transform: rotateX(90deg) translate3d(0, -150rem, -150rem);
}
ceiling:after {
  transform: rotateX(90deg) translate3d(0, -150rem, 150rem);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg