scss布局吊扇旋转的三维立体房间效果代码-html代码-BFW代码库

scss布局吊扇旋转的三维立体房间效果代码

代码语言：html

代码描述：scss布局吊扇旋转的三维立体房间效果代码

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

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

<head>
  <meta charset="UTF-8">


  
<style type = 'text/scss'>
// @import "setup";
$wall: #889199;
$white: #fff;
$none: rgba(#fff, 0);
$wood: #826851;
$blk: #211f1d;
$win: lighten($wall, 20);

html {
  /*  font-size: 1vw;*/
}

html,
body {
  height: 100%;
  margin: 0;
}

div {
  transform-style: preserve-3d;
  perspective: 100rem;
  position: relative;

  *,
  *:before,
  *:after,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    transform-style: preserve-3d;
    /* backface-visibility: hidden;*/
  }
}

div,
room,
wall {
  width: 100%;
  height: 100%;
}

room {
  transform: translateZ(-50rem) rotateY(0deg);
}

wall {
  background: radial-gradient($wall, darken($wall, 20));
  width: 100rem;
  box-shadow: inset 0 0 2rem darken($wall, 20);
  border: 2px solid darken($wall, 20);
  //skirting board
  &:nth-of-type(1),
  &:nth-of-type(2),
  &:nth-of-type(5) {
    &:after,
    &:before {
      width: 100%;
      height: 1.5rem;
      background: radial-gradient(circle, lighten($wall, 5), darken($wall, 5));
      top: auto;
      bottom: 0;
      transform: translate3d(0, 0, 0.25rem);
      box-shadow: inset 0 0 0.5rem darken($wall, 20);
    }

    &:before {
      transform: translate3d(0, -0.75rem, -0.5rem) rotateX(90deg);
      background: lighten($wall, 5);
    }
  }
  //left
  &:nth-of-type(1) {
    transform: translateX(-50%) rotateY(90deg);
    background: none;
    //window
    & > u {
      width: 100%;
      height: calc(100% - 39rem);
      height: 13%;
      background: radial-gradient($wall, darken($wall, 20));
      background-size: 100% calc(100% + 39rem);
      background-size: 100% 700%;

      &:before {
        width: 100%;
        height: 10rem;
        background: radial-gradient(at top, $wall, lighten($wall, 10));
        transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
        top: auto;
        bottom: 0;
        box-shadow: inset 0 2.5rem 1rem rgba($blk, 0.5);
      }
    }

    & > u:nth-of-type(2) {
      width: calc(100% - 85rem);
      width: 25%;
      height: 100%;
      background-size: calc(100% + 85rem) 100%;
      background-size: 400% 100%;
    }

    & > u:nth-of-type(3) {
      width: calc(100% - 75rem);
      width: 25%;
      height: 100%;
      right: 0;
      left: auto;
      background-size: calc(100% + 75rem) 100%;
      background-size: 400% 100%;
      transform: scaleX(-1);

      &:before {
        transform: rotateY(-90deg);
        width: 9rem;
        height: 100%;
        background: radial-gradient(
          at right,
          lighten($wall, 5),
          lighten($wall, 10)
        );
        left: 63%;
        transform-origin: 100% 0;
        box-shadow: inset 1rem 0 1rem rgba($blk, 0.5);
      }
    }
    //w bottom
    & > u:nth-of-type(4) {
      top: auto;
      bottom: 0;
      height: calc(100% - 33rem);
      height: 27%;
      background-size: 100% calc(100% + 33rem);
      background-size: 100% 400%;
      transform: scaleY(-1);

      &:before {
        transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
        background: radial-gradient(
          at right,
          lighten($wall, 15),
          lighten($wall, 20)
        );
      }
    }
  }
  //right
  &:nth-of-type(2) {
    transform: translateX(50%) rotateY(-90deg);
    left: auto;
    right: 0;
  }
  //top
  &:nth-of-type(3) {
    transform: rotateX(-90deg) translate3d(-1rem, 0, -50rem);
    width: calc(100% + 2rem);
    height: 100rem;
    background: radial-gradient(lighten($wall, 5), darken($wall, 10));
  }
  //bottom
  &:nth-of-type(4) {
    transform: rotateX(90deg) translate3d(0, 0, -50rem);
    top: auto;
    bottom: 0;
    width: 100%;
    height: 100rem;
    background: repeating-linear-gradient(
        to right,
        $none,
        $none 2rem,
        rgba(darken($wood, 10), 0.5) 2.2rem
      ),
      //
      radial-gradient($woo.........完整代码请登录后点击上方下载按钮下载查看