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);
  .........完整代码请登录后点击上方下载按钮下载查看