Improving Depth on a 3D Coin

Question

So I am creating a 3d spinning coin animation and current have this code: https://codepen.io/bogomip/pen/WNRooeg

The HTML is simple and its all CSS that makes the coiney bit:

CSS (SCSS)

// 3d properties
$depth-close: 3px;      // CLOSE: distance in the z axis of the before and after sides.
$shadow-max-close: 5px; // CLOSE: size of the 3d shadow

// sizes
$size-close: 10rem;   // CLOSE: size of coin

// properties for sides of the coins irrespective of coin size
@mixin coinStandard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;  // center
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

@mixin closeStandard {
    background-color: $main-color;
    border: 1rem solid rgba($border-color, .7);
}

// each individual coin
.coin {
  position: absolute;
  border-radius: 50%;
  perspective: 1000px;
  transform-style: preserve-3d;
  user-select: none;
}

.close {
  top: -$size-close;
  width: $size-close;
  height: $size-close;
  font-size: 3rem;
  text-shadow: -1px -1px 1px rgba(#fff, 0.7), 1px 1px 1px  rgba(#000, 0.7);
  background-color: rgba($border-color, .7);
  animation: fallingCoin 10s infinite linear;
  
  &::before {
      content: "FP";
      @include coinStandard;
      @include closeStandard;
      transform: translateZ($depth-close);
  } 
  
  &::after {
      content: "$";
      @include coinStandard;
      @include closeStandard;
      transform: translateZ(-$depth-close) rotateY(180deg);
  } 
}

// not sure the box-shadow actually helps much...
@keyframes rotationOnly3DBorder {
  0% { 
    box-shadow: 0px 0 0 $border-color;
    animation-timing-function: ease-in;
  }
  49.999% {
    box-shadow: -calc($shadow-max-close * (1/9)) 0 0 $border-color, 
      -calc($shadow-max-close * (2/9)) 0 0 darken($border-color, 0.05), 
      -calc($shadow-max-close * (3/9)) 0 0 darken($border-color, 0.10), 
      -calc($shadow-max-close * (4/9)) 0 0 darken($border-color, 0.15), 
      -calc($shadow-max-close * (5/9)) 0 0 darken($border-color, 0.20), 
      -calc($shadow-max-close * (6/9)) 0 0 darken($border-color, 0.25), 
      -calc($shadow-max-close * (7/9)) 0 0 darken($border-color, 0.30), 
      -calc($shadow-max-close * (8/9)) 0 0 darken($border-color, 0.35), 
      -$shadow-max-close 0 0 darken($border-color, 0.40);
      animation-timing-function: linear;
  }
  50.001% {
    box-shadow: calc($shadow-max-close * (1/9)) 0 0 $border-color, 
      calc($shadow-max-close * (2/9)) 0 0 darken($border-color, 0.05), 
      calc($shadow-max-close * (3/9)) 0 0 darken($border-color, 0.10), 
      calc($shadow-max-close * (4/9)) 0 0 darken($border-color, 0.15), 
      calc($shadow-max-close * (5/9)) 0 0 darken($border-color, 0.20), 
      calc($shadow-max-close * (6/9)) 0 0 darken($border-color, 0.25), 
      calc($shadow-max-close * (7/9)) 0 0 darken($border-color, 0.30), 
      calc($shadow-max-close * (8/9)) 0 0 darken($border-color, 0.35), 
      calc($shadow-max-close * (9/9)) 0 0 darken($border-color, 0.40);
      animation-timing-function: ease-out; 
  }
  100% { 
    transform: rotateY(360deg); 
    box-shadow: 0px 0 0 $border-color;
  }
}

This gives me a decent effect by essentially having three layers, using z transforms to place them at equal intervals from each other, and then using a animated box-shadow to kind of add that bit of depth.

It works, its not perfect.

Im looking for suggestions for how to make this better. Im really looking for the depth element and the idea of a solid side to the coin. These are perfect examples: https://codepen.io/xaelan/pen/wvwPpLa but I am not able to understand how to replicate that edge looking through that code.

Improving Depth on a 3D Coin

0 Answers