Creating a CSS 3D Bouncy Castle

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

In this tutorial, we'll walk you through creating a 3D bouncy castle using HTML and SCSS (Sass). This whimsical 3D scene features various components like floors, pillars, walls, a robot, and Steve (from Minecraft) all set in a spinning animation.

HTML Structure

Let's start by understanding the HTML structure:

HTML 
<div class="scene">

  <div class="bouncy-castle">

    <div class="floor">
      <div class="floor__section floor__section--1">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="floor__section floor__section--2 floor__section--teal">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="floor__section floor__section--3">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="floor__section floor__section--4 floor__section--teal">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="floor__section floor__section--5">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="floor__grass">
        <div class="face face--top"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
    </div>

    <div class="rope rope--left">
      <div class="face"></div>
    </div>

    <div class="rope rope--right">
      <div class="face"></div>
    </div>

    <div class="wall wall--back">
      <div class="face face--top"></div>
      <div class="face face--back"></div>
    </div>

    <div class="wall wall--left">
      <div class="face face--top"></div>
      <div class="face face--front"></div>
      <div class="face face--back"></div>
    </div>

    <div class="wall wall--right">
      <div class="face face--top"></div>
      <div class="face face--front"></div>
      <div class="face face--back"></div>
    </div>

    <div class="pillar pillar--top-left">
      <div class="face face--top"></div>
      <div class="face face--front"></div>
      <div class="face face--back"></div>
      <div class="face face--left"></div>
      <div class="face face--right"></div>
    </div>

    <div class="pillar pillar--top-right">
      <div class="face face--top"></div>
      <div class="face face--front"></div>
      <div class="face face--back"></div>
      <div class="face face--left"></div>
      <div class="face face--right"></div>
    </div>

    <div class="pillar pillar--bottom-left">
      <div class="face face--top"></div>
      <div class="face face--back"></div>
      <div class="face face--left"></div>
      <div class="face face--right"></div>
    </div>

    <div class="pillar pillar--bottom-right">
      <div class="face face--top"></div>
      <div class="face face--back"></div>
      <div class="face face--left"></div>
      <div class="face face--right"></div>
    </div>

    <div class="steve">
      <div class="steve__head">
        <div class="face face--top"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="steve__body">
        <div class="face face--top"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="steve__arm steve__arm--left">
        <div class="face face--top"></div>
        <div class="face face--bottom"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="steve__arm steve__arm--right">
        <div class="face face--top"></div>
        <div class="face face--bottom"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="steve__leg steve__leg--left">
        <div class="face face--top"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div>
      </div>
      <div class="steve__leg steve__leg--right">
        <div class="face face--top"></div>
        <div class="face face--front"></div>
        <div class="face face--back"></div>
        <div class="face face--left"></div>
        <div class="face face--right"></div> 
      </div>
    </div>

    <div class="robot">
      <div class="face face--top"></div>
      <div class="face face--bottom"></div>
      <div class="face face--front"></div>
      <div class="face face--back"></div>
      <div class="face face--left"></div>
      <div class="face face--right"></div>
    </div>

  </div>

</div>
 
  

The scene div contains our 3D bouncy castle, which is nested within the bouncy-castle div. Inside the bouncy-castle, we have different components like floors, pillars, walls, a robot, and Steve.

SCSS (Sass) Styling

We use SCSS to style the 3D bouncy castle. Here are some key elements of the SCSS code:

SCSS 
//Variables

$animation-speed: 700ms;
$animation-delay: 0.4s;
$castle-size: 400px;
$grass-size: $castle-size + 240px;
$grass-depth: 48px;
$floor-section-size: $castle-size / 5;
$floor-depth: 72px;
$pillar-depth: 128px;
$pillar-thickness: 64px;
$wall-depth: 116px;
$wall-height: 32px;
$wall-width: $castle-size - ($pillar-thickness * 2) + 24px;
$snap-edge: ($castle-size / 2) - ($pillar-thickness / 2);

//Pivot Mixin

@mixin pivot(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50%;
  transform-style: preserve-3d;
}

//Face Mixin

@mixin face(
  $texture: 'face-placeholder.jpg',
  $texture-size: 128px,
  $texture-position: 'center',
  $height: 128px,
  $width: 128px
){
  backface-visibility: hidden;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1678849/' + $texture);
  background-position: $texture-position;
  background-size: $texture-size;
  height: $height;
  position: absolute;
  transform-style: preserve-3d;
  width: $width;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}

//Box Mixin

@mixin box(
  $pivot-position-x: "center",
  $pivot-position-y: "center",
  $pivot-position-z: "center",
  $depth: 128px,
  $height: 128px,
  $width: 128px,
  $shadow-bottom: true,
  $texture: "box-placeholder.jpg",
  $texture-top: $texture,
  $texture-bottom: $texture,
  $texture-left: $texture,
  $texture-right: $texture,
  $texture-front: $texture,
  $texture-back: $texture,
  $texture-size: 128px,
  $top-x: 0,
  $bottom-x: 0,
  $sides-x: 0,
  $top-y: 0,
  $bottom-y: 0,
  $sides-y: 0,
  $top-z: 0,
  $bottom-z: 0,
  $sides-z: 0
){

  @if($pivot-position-z == 'top'){
    $top-z: 0;
    $bottom-z: - $depth;
    $sides-z: - $depth /2;
  }@else if($pivot-position-z == 'center'){
    $top-z: $depth / 2;
    $bottom-z: - $depth / 2;
    $sides-z: 0;
  }@else{
    $top-z: $depth;
    $bottom-z: 0;
    $sides-z: $depth /2;
  }

  @if($pivot-position-y == 'top'){
    $top-y: 0;
    $bottom-y: 0;
    $sides-y: calc( -50% + #{$height / 2});
  }@else if($pivot-position-y == 'center'){
    $top-y: -50%;
    $bottom-y: -50%;
    $sides-y: -50%;
  }@else{
    $top-y: -$height;
    $bottom-y: -$height;
    $sides-y: calc( -50% - #{$height / 2});
  }

  @if($pivot-position-x == 'left'){
    $top-x: 0;
    $bottom-x: 0;
    $sides-x: calc( -50% + #{$width / 2});
  }@else if($pivot-position-x == 'center'){
    $top-x: -50%;
    $bottom-x: -50%;
    $sides-x: -50%;
  }@else{
    $top-x: -$width;
    $bottom-x: -$width;
    $sides-x: calc( -50% - #{$width / 2});
  }

  @include pivot;

  .face--top{
    @include face($texture-top, $texture-size, center, $height, $width);
    transform: translate3d($top-x, $top-y, $top-z);
  }

  .face--bottom{
    @include face($texture-bottom, $texture-size, center, $height, $width);
    transform: translate3d($bottom-x, $bottom-y, $bottom-z);
    @if($shadow-bottom){
      box-shadow: 0 0 10px rgba(0,0,0,0.8);
    }
  }

  .face--front{
    @include face($texture-front, $texture-size, top center, $depth, $width);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( $height / 2 )
    rotateX(270deg);
  }

  .face--back{
    @include face($texture-back, $texture-size, top center, $depth, $width);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( -$height / 2 )
    rotateX(270deg)
    rotateY(180deg);
  }

  .face--left {
    @include face($texture-left, $texture-size, top center, $depth, $height);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( $width / 2 )
    rotateX(270deg)
    rotateY(90deg);
  }

  .face--right{
    @include face($texture-right, $texture-size, top center, $depth, $height);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( -$width / 2 )
    rotateX(270deg)
    rotateY(270deg);
  }

}

//HTML & Body

html{
  height: 100%;
}

body {
  background-color: #252c36;
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4),rgba(0,0,0,0));
  height: 100%;
  overflow: hidden;
  transform: scale(0.75);
}

//Scene

.scene{
  @include pivot;
  transform: rotateX(45deg) rotateZ(225deg);
  animation: sceneSpin 30s infinite linear;
}

@keyframes sceneSpin{
  0%{ transform: rotateX(45deg) rotateZ(225deg); }
  50%{ transform: rotateX(45deg) rotateZ(135deg); }
  100%{ transform: rotateX(45deg) rotateZ(225deg); }
}

//Bouncy Castle

.bouncy-castle{
  @include pivot;
}

//Floor

.floor{
  @include pivot;
  transform: translateZ(-2px);
}

.floor__grass{
  @include box(
    $pivot-position-z: 'top',
    $depth: $grass-depth,
    $height: $grass-size,
    $width: $grass-size,
    $texture: "grass-side.png",
    $texture-top: "grass.png",
    $texture-size: cover
  );
  transform: translateZ(-$floor-depth - 40px);
}

.floor__section{
  @include box(
    $pivot-position-z: 'top',
    $depth: $floor-depth,
    $height: $castle-size,
    $width: $castle-size / 5,
    $texture: "bouncy-dark.png",
    $texture-left: "bouncy-dark-side.png",
    $texture-right: "bouncy-dark-side.png",
    $texture-front: "bouncy-dark-cap.png",
    $texture-back: "bouncy-dark-cap.png",
    $texture-size: cover
  );
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.floor__section--teal{
  @include box(
    $pivot-position-z: 'top',
    $depth: $floor-depth,
    $height: $castle-size,
    $width: $castle-size / 5,
    $texture: "bouncy-teal.png",
    $texture-left: "bouncy-teal-side.png",
    $texture-right: "bouncy-teal-side.png",
    $texture-front: "bouncy-teal-cap.png",
    $texture-back: "bouncy-teal-cap.png",
    $texture-size: cover
  );
}

.floor__section--1{
  animation-name: floorSection1;
  transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2)) translateZ(-8px);
}

.floor__section--2{
  animation-name: floorSection2;
  transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size) translateZ(-20px);
}

.floor__section--3{
  animation-name: floorSection3;
  transform: translateZ(-28px);
}

.floor__section--4{
  animation-name: floorSection4;
  transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size)) translateZ(-16px);
}

.floor__section--5{
  animation-name: floorSection5;
  transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2))) translateZ(-8px);
}

@keyframes floorSection1{
  0%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2)) translateZ(-8px); }
  50%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2)) translateZ(-0); }
  100%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2)) translateZ(-8px); }
}

@keyframes floorSection2{
  0%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size) translateZ(-20px); }
  50%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size) translateZ(0); }
  100%{ transform: translateX( ($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size) translateZ(-20px); }
}

@keyframes floorSection3{
  0%{ transform: translateZ(-28px); }
  50%{ transform: translateZ(0); }
  100%{ transform: translateZ(-28px); }
}

@keyframes floorSection4{
  0%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size)) translateZ(-16px); }
  50%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size)) translateZ(0); }
  100%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2) - $floor-section-size)) translateZ(-16px); }
}

@keyframes floorSection5{
  0%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2))) translateZ(-8px); }
  50%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2))) translateZ(0); }
  100%{ transform: translateX( - (($castle-size / 2)  - ($floor-section-size / 2))) translateZ(-8px); }
}

//Pillars

.pillar{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: $pillar-depth,
    $height: $pillar-thickness,
    $width: $pillar-thickness,
    $texture: 'bouncy-pillar.png',
    $texture-top: 'bouncy-pillar-cap.png',
    $texture-size: cover
  );
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.pillar--top-left{
  animation-name: pillarTopLeft;
  transform: translateY(-$snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0);
}

.pillar--top-right{
  animation-name: pillarTopRight;
  transform: translateY(-$snap-edge) translateX($snap-edge) rotateX(0) rotateY(0);
}

.pillar--bottom-left{
  animation-name: pillarBottomLeft;
  transform: translateY($snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0);
}

.pillar--bottom-right{
  animation-name: pillarBottomRight;
  transform: translateY($snap-edge) translateX($snap-edge) rotateX(0) rotateY(0);
}

@keyframes pillarTopLeft{
  0%{ transform: translateY(-$snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0); }
  50%{ transform: translateY(-$snap-edge) translateX(-$snap-edge) rotateX(6deg) rotateY(-6deg); }
  100%{ transform: translateY(-$snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0); }
}

@keyframes pillarTopRight{
  0%{ transform: translateY(-$snap-edge) translateX($snap-edge) rotateX(0) rotateY(0); }
  50%{ transform: translateY(-$snap-edge) translateX($snap-edge) rotateX(6deg) rotateY(6deg); }
  100%{ transform: translateY(-$snap-edge) translateX($snap-edge) rotateX(0) rotateY(0); }
}

@keyframes pillarBottomLeft{
  0%{ transform: translateY($snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0); }
  50%{ transform: translateY($snap-edge) translateX(-$snap-edge) rotateX(-6deg) rotateY(-6deg); }
  100%{ transform: translateY($snap-edge) translateX(-$snap-edge) rotateX(0) rotateY(0); }
}

@keyframes pillarBottomRight{
  0%{ transform: translateY($snap-edge) translateX($snap-edge) rotateX(0) rotateY(0); }
  50%{ transform: translateY($snap-edge) translateX($snap-edge) rotateX(-6deg) rotateY(6deg); }
  100%{ transform: translateY($snap-edge) translateX($snap-edge) rotateX(0) rotateY(0); }
}

//Walls

.wall{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: $wall-depth,
    $height: $wall-height,
    $width: $wall-width,
    $texture: "bouncy-wall.png",
    $texture-top: "bouncy-wall-top.png",
    $texture-size: cover
  );
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.wall--back{
  animation-name: wallBack;
  transform: translateY($snap-edge) rotateX(0deg);
}

.wall--left{
  animation-name: wallLeft;
  transform: translateX(-$snap-edge) rotateZ(90deg) rotateX(0);
}

.wall--right{
  animation-name: wallRight;
  transform: translateX($snap-edge) rotateZ(90deg) rotateX(0);
}

@keyframes wallBack{
  0%{ transform: translateY($snap-edge) rotateX(0deg); }
  50%{ transform: translateY($snap-edge) rotateX(-8deg); }
  100%{ transform: translateY($snap-edge) rotateX(0deg); }
}

@keyframes wallRight{
  0%{ transform: translateX($snap-edge) rotateZ(90deg) rotateX(0); }
  50%{ transform: translateX($snap-edge) rotateZ(90deg) rotateX(8deg); }
  100%{ transform: translateX($snap-edge) rotateZ(90deg) rotateX(0); }
}

@keyframes wallLeft{
  0%{ transform: translateX(-$snap-edge) rotateZ(90deg) rotateX(0); }
  50%{ transform: translateX(-$snap-edge) rotateZ(90deg) rotateX(-8deg); }
  100%{ transform: translateX(-$snap-edge) rotateZ(90deg) rotateX(0); }
}

//Robot

.robot{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: 27px,
    $height: 54px,
    $width: 27px,
    $shadow-bottom: false,
    $texture: "face-placeholder.jpg",
    $texture-bottom: "robot-bottom.gif",
    $texture-top: "robot-top.png",
    $texture-left: "robot-side.png",
    $texture-right: "robot-side.png",
    $texture-front: "robot-cap.png",
    $texture-back: "robot-cap.png",
    $texture-size: cover
  );
  animation: robot $animation-speed infinite ease-in-out $animation-delay;
  transform: translateY(-100px) translateX(100px) translateZ(-20px) rotateZ(45deg);

  .face--bottom{
    height: 78px;
    width: 51px;
    transform: translate3d(-50%, -50%, 13px);
  }
}

@keyframes robot{
  0%{ transform: translateY(-100px) translateX(100px) translateZ(-20px) rotateZ(45deg); }
  50%{ transform: translateY(-100px) translateX(100px) translateZ(0) rotateZ(45deg); }
  100%{ transform: translateY(-100px) translateX(100px) translateZ(-20px) rotateZ(45deg); }
}

//Steve

.steve{
  @include pivot;
  animation: steve $animation-speed infinite ease-in-out $animation-delay;
  transform: translateZ(18px);
}

.steve__head{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: 32px,
    $height: 32px,
    $width: 32px,
    $shadow-bottom: false,
    $texture: "steve-head-top.png",
    $texture-back: "steve-face.png",
    $texture-left: "steve-head-right.png",
    $texture-right: "steve-head-left.png",
    $texture-size: cover
  );
  animation: steveHead $animation-speed infinite ease-in-out $animation-delay;
  transform: translateZ(54px);
}

.steve__body{
  @include box(
    $pivot-position-z: 'top',
    $depth: 48px,
    $height: 24px,
    $width: 32px,
    $shadow-bottom: false,
    $texture: "steve-body.png",
    $texture-back: "steve-body-front.png",
    $texture-size: cover
  );
  transform: translateZ(52px);
}

.steve__leg{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 16px,
    $width: 16px,
    $texture: "steve-leg.png",
    $texture-size: cover
  );
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.steve__arm{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 16px,
    $width: 16px,
    $shadow-bottom: false,
    $texture: "steve-arm.png",
    $texture-size: cover
  );
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.steve__arm--left{
  animation-name: steveArmLeft;
  transform: translateX(-24px) translateZ(48px);
}
.steve__arm--right{
  animation-name: steveArmRight;
  transform: translateX(24px) translateZ(48px);
}

.steve__leg--left{
  animation-name: steveLegLeft;
  transform: translateX(-8px);
}

.steve__leg--right{
  animation-name: steveLegRight;
  transform: translateX(8px);
}

@keyframes steve{
  0%{ transform: translateZ(18px); }
  50%{ transform: translateZ(128px); }
  100%{ transform: translateZ(18px); }
}

@keyframes steveHead{
  0%{ transform: translateZ(54px) rotateX(0); }
  50%{ transform: translateZ(54px) rotateX(-8deg); }
  100%{ transform: translateZ(54px) rotateX(0); }
}

@keyframes steveArmLeft{
  0%{ transform: translateX(-24px) translateZ(48px) rotateY(0); }
  50%{ transform: translateX(-24px) translateZ(48px) rotateY(40deg); }
  100%{ transform: translateX(-24px) translateZ(48px) rotateY(0); }
}

@keyframes steveArmRight{
  0%{ transform: translateX(24px) translateZ(48px) rotateY(0); }
  50%{ transform: translateX(24px) translateZ(48px) rotateY(-40deg); }
  100%{ transform: translateX(24px) translateZ(48px) rotateY(0); }
}

@keyframes steveLegLeft{
  0%{ transform: translateX(-8px) rotateY(0); }
  50%{ transform: translateX(-8px) rotateY(20deg); }
  100%{ transform: translateX(-8px) rotateY(0); }
}

@keyframes steveLegRight{
  0%{ transform: translateX(8px) rotateY(0); }
  50%{ transform: translateX(8px) rotateY(-20deg); }
  100%{ transform: translateX(8px) rotateY(0); }
}

//Rope

.rope{
  @include pivot;
  animation-duration: $animation-speed;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: $animation-delay;
}

.rope .face{
  @include face('rope.png', cover, center, 124px, $castle-size);
  transform: translate3d(-50%, -50%, 0);
}

.rope--left{
  animation-name: ropeLeft;
  transform: translateX(252px) translateZ(-74px) rotateY(30deg) rotateZ(-90deg);
}

.rope--right{
  animation-name: ropeRight;
  transform: translateX(-252px) translateZ(-74px) rotateY(-30deg) rotateZ(-270deg);
}

@keyframes ropeLeft{
  0%{ transform: translateX(252px) translateZ(-74px) rotateY(30deg) rotateZ(-90deg); }
  50%{ transform: translateX(252px) translateZ(-74px) rotateY(40deg) rotateZ(-90deg); }
  100%{ transform: translateX(252px) translateZ(-74px) rotateY(30deg) rotateZ(-90deg); }
}

@keyframes ropeRight{
  0%{ transform: translateX(-252px) translateZ(-74px) rotateY(-30deg) rotateZ(-270deg); }
  50%{ transform: translateX(-252px) translateZ(-74px) rotateY(-40deg) rotateZ(-270deg); }
  100%{ transform: translateX(-252px) translateZ(-74px) rotateY(-30deg) rotateZ(-270deg); }
}
 
  
  • Variables: Several variables define sizes, animation speed, and textures used in the castle.
  • Mixins: pivot and face mixins are defined for positioning and styling faces of the 3D objects. The box mixin is used to create 3D box elements.
  • Animation: Several keyframes are defined for animation. The sceneSpin animation rotates the entire scene, while individual animations are created for different components like floors, pillars, walls, the robot, and Steve.
  • Component Styling: Each component is styled using the box mixin. For example, the floor has a grass top and dark sides. Pillars and walls are textured with stone-like appearances. The robot and Steve are animated with various textures and movement.

Live Preview

See the Pen CSS 3D Bouncy Castle by Codewithshobhit (@Codewithshobhit) on CodePen.

Usage of 3D Transformations

The code uses CSS 3D transformations to position and animate elements in the scene. Elements are translated along the X, Y, and Z axes and rotated to create the 3D effect.

Conclusion

Creating a 3D bouncy castle with CSS and HTML is a fun and creative project. This tutorial has provided an overview of the HTML structure and SCSS code used to achieve this effect. Feel free to modify the code to suit your preferences and experiment with different textures and animations to create your own unique 3D scene.

You can copy and paste the provided code into your HTML and SCSS files to create the bouncy castle, and then further customize it to your liking. Have fun experimenting with this unique and playful 3D design!