Spinning 3D House

index.html

<div class="page">
  <div class="container">

    <div class="wrapper">
      <div class="house">
        <div class="floor"></div>
        <div class="wall wall--back"></div>
        <div class="wall wall--left wall--mask"></div>
        <div class="wall wall--right"></div>
        <div class="roof roof--left roof--mask"></div>
        <div class="roof roof--right roof--mask"></div>
      </div>
      <div class="shadow"></div>
    </div>
    
  </div>
</div>

<svg class="svg-defs">
  <defs>
    <clipPath id="wall-mask">
      <path d="M0,0V200H75V100h50V200H300V0ZM225,150H175V100h50Z"/>
    </clipPath>
    <clipPath id="roof-mask">
      <path d="M175,0a25,25,0,0,1-50,0H0V212H300V0Z"/>
    </clipPath>
   </defs>
</svg>

spinning-3d-house.markdown

Spinning 3D House

A rotating, floating 3D house using CSS animation and some SVG clip-paths.

A Pen by Jo Dodd on CodePen.

License.

style.scss

:root {
  --bg-color: #262625;
  --house-color: #D0FB68;
}

html,
body {
  background-color: var(--bg-color);
  overflow: hidden;
  height: 100%;
}

.page {
  justify-content: center;
  align-items: center;
  display: flex;
  
  text-align: center;
  
  height: 100%;
  width: 100%;
}

.container {
  margin-bottom: -200px;
}

.wrapper {
  perspective: 2000px;
  overflow: visible;
}

.house {
  animation: house 5s linear infinite;
  transform-style: preserve-3d;
 
  position: relative;
  height: 300px;
  width: 300px;
}

.shadow {
  animation: shadow 5s linear infinite;
  
  box-shadow: 0 0 50px 25px rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.1);
  border-radius: 25%;
  
  position: absolute;
  height: 300px;
  width: 300px;
  z-index: -1;
}

.wall,
.roof,
.floor {
  background-image: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  background-color: var(--house-color);
  opacity: 0.9;
  
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  
  position: absolute;
  width: 300px;
}

.floor {
  transform: rotateX(90deg) translateZ(-50px);
  height: 300px;
  opacity: 1;
}

.wall {
  height: 200px;
}

.wall--back {
  transform: translateX(-150px) rotateY(-90deg);
  
  &:after {
    border-color: transparent transparent var(--house-color) transparent;
    border-width: 0 150px 150px 150px;
    border-style: solid;

    content: '';
    height: 0;
    width: 0;
    
    position: absolute;
    top: -150px;
    left: 0;
  }
}

.wall--right {
  transform: translateZ(150px);
}

.wall--left {
  transform: rotateY(180deg) translateZ(150px);
}

.roof {
  height: 212px;
}

.roof--left {
  transform: translate3d(0px, -181px, -75px) rotateX(-45deg) rotateY(-180deg) rotateZ(0deg);
}

.roof--right {
  transform: translate3d(0px, -181px, 75px) rotateX(45deg) rotateY(-180deg) rotateZ(0deg);
}

.wall--mask {
  clip-path: url(#wall-mask);
}

.roof--mask {
  clip-path: url(#roof-mask);
}

@keyframes house {
	0% {
		transform: rotateX(-15deg) rotateY(0deg);
	}
	50% {
		transform: rotateX(-15deg) rotateY(-180deg);
	}
	100% {
		transform: rotateX(-15deg) rotateY(-360deg);
	}
}

@keyframes shadow {
	0% {
		transform: rotateX(-15deg) rotateY(0deg) rotateX(90deg) translateZ(200px);
	}
	50% {
		transform: rotateX(-15deg) rotateY(-180deg) rotateX(90deg) translateZ(200px);
	}
	100% {
		transform: rotateX(-15deg) rotateY(-360deg) rotateX(90deg) translateZ(200px);
	}
}