#frame,
#frame2 {
  margin: 1% auto;
  height: 500px;
  width: 500px;
  border: 8px steelblue double;
  padding: 0;
}
@keyframes rotate {
  from {
    transform: rotateY(0);
    -webkit-transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
}
#piece,
#piece2 {
  margin: 5% auto;
  height: 400px;
  width: 400px;
  text-align: center;
  transform-style: preserve-3d;
}
#frame:hover #piece {
  animation: rotate linear forwards 1.5s alternate;
}
.piecePart {
  height: 400px;
  width: 400px;
  border-radius: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.corner {
  z-index: -1;
  height: 282.84271247px;
  width: 100px;
  position: absolute;
  left: 150px;
  top: 58.57864376px;
  backface-visibility: hidden;
}
#corner1 {
  background-image: linear-gradient(gold, #aba407);
  left: 150px;
  top: 58.57864376px;
  -webkit-transform: translateX(100px) translateY(100px) rotateY(90deg) rotateX(-45deg);
  transform: translateX(100px) translateY(100px) rotateY(90deg) rotateX(-45deg);
}
#corner2 {
  background-image: linear-gradient(#aba407, gold);
  -webkit-transform: translateX(100px) translateY(-100px) rotateY(90deg) rotateX(45deg);
  transform: translateX(100px) translateY(-100px) rotateY(90deg) rotateX(45deg);
}
#corner3 {
  background-image: linear-gradient(#aba407, gold);
  -webkit-transform: translateX(-100px) translateY(-100px) rotateY(270deg) rotateX(45deg);
  transform: translateX(-100px) translateY(-100px) rotateY(270deg) rotateX(45deg);
}
#corner4 {
  background-image: linear-gradient(gold, #aba407);
  -webkit-transform: translateX(-100px) translateY(100px) rotateY(270deg) rotateX(-45deg);
  transform: translateX(-100px) translateY(100px) rotateY(270deg) rotateX(-45deg);
}
#piecePile {
  background-color: gold;
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
#pieceFace {
  -webkit-transform: rotateY(180deg) translateZ(50px);
  transform: rotateY(180deg) translateZ(50px);
  background-color: gold;
}
#frame2:hover #pieceFace2 {
  background-color: #0000ff;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
#frame2:hover #pieceFace2 + #piecePile2 {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#pieceFace2 {
  z-index: 0;
  transition: background-color 2s cubic-bezier(1, 0, 0, 1), transform 2s linear;
  background-color: gold;
}
#piecePile2 {
  z-index: 0;
  transition: background-color 2s cubic-bezier(1, 0, 0, 1), transform 2s linear;
  background-color: #ff0000;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}