* { 
  box-sizing: border-box; 
}

body { 
  font-family: sans-serif; 
  text-align: center;
  background-color: grey;
}
h3 {
  margin-top: 100px;
}

/* Header */
#header {
  background-color: maroon;
  color: bisque;
  padding: 50px;
}

/* 2D Transformations */
.box {
  width: 8em;
  height: 10em;
  padding: 1em;
  margin: 2em auto;
  color: #333;
  background-color: black;
  background-image: linear-gradient(rgb(205, 255, 255), rgb(204, 254, 204));
  border-radius: 10px 10px 20px rgba(0,0,0,0.8);
}

.translate {
  -webkit-transform: translate(30px,30px);
  transform: translate(30px,30px);
}

.translate:hover {
  -webkit-transform: none;
  transform: none;
}

.rotate {
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.rotate:hover {
  -webkit-transform: none;
  transform: none;
} 

.scale {
  -webkit-transform: scale(1,3);
  transform: scale(1,3);
  margin: 200px;
}

.scale:hover {
  -webkit-transform: none;
  transform: none;
} 

.skewx {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

.skewx:hover {
  -webkit-transform: none;
  transform: none;
}

.skewy {
  -webkit-transform: skewY(-40deg);
  transform: skewY(-40deg);
}

.skewy:hover {
  -webkit-transform: none;
  transform: none;
}

.matrix {
  -webkit-transform: matrix(1, 2, -1, 1, 80, 80);
  transform: matrix(1, 2, -1, 1, 80, 80);
  margin: 100px 100px;
}

.matrix:hover {
  -webkit-transform: none;
  transform: none;
}

.origin {
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 20% 40%;
  margin: 200px 100px;
}

.origin:hover {
  -webkit-transform: none;
  transform: none;
}

/* 3D Transformations */
.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 60px 60px 60px 0;
  perspective: 600px;
}

.panel {
  width: 100%;
  height: 100%;
  background: hsla(0, 100%, 50%, 0.7);
  line-height: 200px;
  color: white;
  font-size: 18px;
  text-align: center;
}

.panel-translate3d {
  transform: translate3d(60px,60px,60px);
}

.panel-matrix3d {
  transform: matrix3d(0.583333, 0.186887, 0.79044, 0, -0.52022, 0.833333, 0.186887, 0, -0.623773, -0.52022, 0.583333, 0, 0, 0, 0, 1);
}

.panel-rotate3d {
  transform: rotate3d(1, 5, 1, 60deg);
}

.panel-scale3d {
  transform: scale3d(2, 2, 1);
}

.panel-translatex {
  transform: translatex(-60px);
}

.panel-translatey {
  transform: translatey(40px);
}

.panel-scale {
  transform: scale(1, 2);
}

/* Card Flip */
.scene1 {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 100px;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.card_face {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card_face--front {
  background: red;
}

.card_face--back {
  background: blue;
  transform: rotateY( 180deg );
}

.card.is-flipped {
  transform: rotateY(180deg);
}

/* Cube */
.scene2 {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube_face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

.cube_face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.cube_face--right  { background: hsla( 60, 100%, 50%, 0.7); }
.cube_face--back   { background: hsla(120, 100%, 50%, 0.7); }
.cube._face--left   { background: hsla(180, 100%, 50%, 0.7); }
.cube_face--top    { background: hsla(240, 100%, 50%, 0.7); }
.cube_face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube_face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube_face--right  { transform: rotateY( 90deg) translateZ(100px); }
.cube_face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube_face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube_face--top    { transform: rotateX( 90deg) translateZ(100px); }
.cube_face--bottom { transform: rotateX(-90deg) translateZ(100px); }

label { 
  margin-left: 10px;
}

.radio-group {
  text-align: left;
}

/* Carousel */
.scene3 {
  border: 1px solid #CCC;
  margin: 40px 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin: 40px auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel_cell {
  position: absolute;
  width: 190px;
  height: 120px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.carousel_cell:nth-child(9n+1) { background: hsla(  0, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel_cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }

.carousel_cell:nth-child(1) { transform: rotateY(  0deg) translateZ(288px); }
.carousel_cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel_cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel_cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel_cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel_cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel_cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel_cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel_cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }



/* Footer */
#footer {
  background-color: maroon;
  color: bisque;
  height: 80px;
  padding: 10px;
}