CodePen Embed - 3D Cube Media Player CSS only

-# Pen title

.player
  .player_inner
    .player_inner__top
      .t_left
        %i.fa.fa-bars
      .t_mid
        %h1 CUB3DPlayer
      .t_right
        %i.fa.fa-search
    .player_inner__middle
      %input.trigger--4{:type => "radio", :name => 'omni'}
      %input.trigger--3{:type => "radio", :name => 'omni'}
      %input.trigger--2{:type => "radio", :name => 'omni'}
      %input.trigger--1{:type => "radio", :name => 'omni'}
      %input.empty
      .cube
        .cube_inner
          .cube_inner__front
            .bars
              -(1..10).each do
                .bars_bar
            .details
              .details_album
              %h2 Koan Sound - Meanwhile in the future
              %h3 Funkblaster
          .cube_inner__left
            .options
              %i.fa.fa-headphones
              %i.fa.fa-redo-alt
              %i.fa.fa-random
              %i.fa.fa-fast-forward
              %i.fa.fa-music
          .cube_inner__right
            .volume
              -(1..14).each do
                .volume_pip
              %i.fa.fa-volume-up
      .r_trim
      .l_trim
      .shadow_right
      .shadow_left
    .player_inner__bottom
      .options
        %i.fa.fa-repeat
        %i.fa.fa-random
      .playbar
        .playbar_inner
        .playbar_left
          %span 0:00
        .playbar_right
          %span 3:45
      .controls
        .controls_left
          %i.fa.fa-step-backward
        .controls_middle
          %i.fa.fa-play-circle
        .controls_right
          %i.fa.fa-step-forward

View Compiled

// Vars
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
$player_bg: #3a4e47;
$player_width: 380px;
$player_radius: 6px;
$player_top_height: 70px;
$player_bottom_height: 190px;
$player_cube_height: 380px;
$player_height: $player_top_height + $player_bottom_height + $player_cube_height;
$global_perspective: 800px;
$transition_time: 300ms 200ms;
$tilt_angle: 30deg;

$face_bg: pink;


// Styles

.shadow_right {
  width: 90px;
  height: 380px;
  transition: all $transition_time;
  top: 0px;
  position: absolute;
  pointer-events: none;
  box-shadow: 0px 0px 0px #303f45 inset;
}

i {
  transition: all .3s;
  cursor: pointer;
}

i:hover {
  color: #44f5b7
}

.shadow_left {
  width: 90px;
  height: 380px;
  transition: all $transition_time;
  top: 0px;
  position: absolute;
  right:0;
  pointer-events: none;
  box-shadow: 0px 0px 0px #303f45 inset;
}
.r_trim {
  width: 260px;
  height: 660px;
  position: absolute;
  left: 380px;z-index:2;
  right: 0;
  top: -82px;
  margin: auto;
  background: #4cb892;
}
.l_trim {
  width: 260px;
  height: 660px;
  position: absolute;z-index:2;
  left: -640px;
  right: 0;
  top: -33px;
  margin: auto;
  background: #4cb892;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: #4cb892;
}
%center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}

%face {
  width: $player_width;
  height: $player_width;
  background: $face_bg;
  position: absolute;
  transform-style: preserve-3D;
}

@mixin traverse($n, $x, $y, $ox, $oy, $oz, $l, $r, $to, $b, $w, $h) {

  $t : '';


  & .trigger--#{$n} {
    @extend %trigger;

    left: $l;
    right: $r;
    top: $to;
    bottom: $b;
    width: $w;
    height: $h;

    @for $i from 1 through ($n) {
      $t: $t + 'input +';
    }

    &:checked {
      & + #{$t} .cube {
        transform: translateY(-50%) rotateX($x) rotateY($y);  
        transform-origin: $ox $oy $oz;
        transition: transform $transition_time, transform-origin 0s ;
      }
    }
  }
}

body {
  & .player {
    &_inner {
      @extend %center;

      background: $player_bg;
      width: $player_width;
      height: $player_height;
      border-radius: $player_radius;
      perspective: $global_perspective;
      //box-shadow: 0px 0px 12px #255645;
      &__top {
        height: $player_top_height;
        padding: 24px;
        background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png');
        background-size: 103% !important;
        margin-bottom: 0px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        i,
        h1 {
          position: relative;
          //top: 4px;
          color: white;
          font-weight: 600;
        }

        & .t_left {
          width: 25%;
          float: left;
        }

        & .t_mid {
          float: left;
          text-align: center;
          width: 50%;

          h1 {
            margin: 0;
            font-size: 12px;
          }
        }

        & .t_right {
          float: right;
          width: 25%;
          text-align: right;
        }
      }

      &__middle {
        position: relative;
        height: 380px;
        background: #40555f;
        box-shadow: 0px 0px 110px #181f23 inset;

        .empty {
          display: none;
        }

        input {
          -webkit-appearance: none;
          -moz-appearance: none;
          background: transparent !important;
          outline: none;
          transition: all .3s;


          width: 60px !important;
          height: 50px !important;
          line-height: 16px;



          &:hover {
            background: #00000061 !important;
            &:after {
              color:#44f5b7 !important;
            }
          }
          &:not(:checked) {
            //transition: all .3s .3s;
          }
          &:nth-of-type(1){
            width: 130px !important;
            top: 40px;
            height: 320px !important;

            &:hover {
              background: none !important;
            }
            &::after {
              font-family: 'Open Sans', sans-serif, 'fontawesome';
              content: '\f001   Now Playing';
              display: block;
              left: 0 !important;
              color: white;
              font-size: 13px;
              cursor: pointer;
            }
          }
          &:nth-of-type(2){
            display: none;
            &::after {
              font-family: 'fontawesome';
              content: '\f001';
              display: block;
              color: white;
              font-size: 18px;
              cursor: pointer;
            }

          }
          &:nth-of-type(3){
            BORDER-TOP-LEFT-RADIUS:50PX;
            border-bottom-left-radius:50px;

            &::after {
              font-family: 'fontawesome';
              content: '\f028';
              display: block;
              color: white;
              font-size: 18px;
              cursor: pointer;
            }

            &:checked  {
              opacity: 0;
              right:-50px;box-shadow: 0px 0px 0px 100px #00000061;
              pointer-events: none;
              & + input {
                //opacity: 0;
                //left:-50px;
                //pointer-events: none;
                & + input + div > .cube_inner > .cube_inner__right i {
                  opacity: 1;
                  top: 8px;
                  transition: all .3s .3s;
                }
                & + input + div + div + div + div {
                  display: block;
                  box-shadow: 60px 10px 50px -17px #303f45 inset
                }
                & + input + div + div + div + div + div{
                  display: block;
                  box-shadow: -60px 10px 50px -17px #303f45 inset
                }
              }
            }
          }
          &:nth-of-type(4){
            BORDER-TOP-right-RADIUS:50PX;
            border-bottom-right-radius:50px;
            &::after {
              font-family: 'fontawesome';
              content: '\f1de';
              display: block;
              color: white;
              font-size: 18px;
              cursor: pointer;left: 4px;
            }
            &:checked  {
              opacity: 0;
              left:-50px;
              pointer-events: none;
              box-shadow: 0px 0px 0px 100px #00000061;


              & + input + div + div + div + div {
                display: block;
                box-shadow: 60px 10px 50px -17px #303f45 inset
              }
              & + input + div + div + div + div + div{
                display: block;
                box-shadow: -60px 10px 50px -17px #303f45 inset
              }
            }
          }

        }

        %trigger {
          background: black;
          width: 20px;
          //opacity: 0;
          cursor: pointer;
          height: 400px;
          position: absolute;
          z-index: 2;
          margin: auto;
          text-align: center;

          &::after {
            position: relative;
            top: 18px;
            left: -6px;
            transition: all .3s;
          }
        }

        @include traverse(1, 0, $tilt_angle, 200px, 0px, -200px, 0px, auto, 0, 0, 20px, 40px);
        @include traverse(2, 0, -$tilt_angle, 200px, 0px, -200px, auto, 0px, 0, 0, 20px, 40px);
        @include traverse(3, -0, 0, 200px, 200px, -200px, 0, 0, 0px, auto, 40px, 20px);
        @include traverse(4, -0, 0, 200px, 200px, -200px, 0, 0, 0px, auto, 40px, 20px);

        & .cube {
          @extend %center;

          top: 190px;
          height: $player_cube_height;
          transform-style: preserve-3D;
          perspective-origin: ($player_cube_height / 2) ($player_cube_height / 2);
          transition: all $transition_time cubic-bezier(0.1, 1.94, 0.32, 1.02), transform-origin 0ms;


          &_inner {
            height: $player_cube_height;
            transform-style: preserve-3D;

            & > div {
              @extend %face;

              @for $i from 1 through 4 {
                &:nth-of-type(#{$i}) {
                  background: darken($face_bg, 2 * $i);
                }
              }
            }

            &__front {
              background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png') !important;
              background-size: 103% !important;
              background-position-y: -71px !important;
              .bars {
                position: absolute;
                left:0;
                bottom: 0;
                transform: rotatez(180deg);
                width: 100%;
                z-index: 1;


                &_bar {
                  width: 10px;
                  //height: 100px;
                  background: white;
                  opacity: 0.1;
                  float: left;
                  width: 10%;


                  //  opacity: 1;
                  @for $i from 1 through 100 {
                    &:nth-of-type(#{$i}) {
                      animation: eq 1s $i * random(40) + 0ms infinite ease-in-out;
                    }
                  }
                }
              }
              & .details {
                position: absolute;
                z-index: 10;
                width: 100%;
                top:50%;
                transform: translateY(-50%);

                color: white;
                text-align: center;

                &_album {
                  width: 90px;
                  height: 90px;
                  background-size: cover !important;
                  background: white;
                  border-radius: 4px;
                  margin: 0 auto;
                  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koanalbum.png');
                  margin-bottom: 20px;
                }

                h2 {
                  font-size: 12px;
                  font-weight: 600;
                  margin:0;
                }

                h3 {
                  font-size: 10px;
                  margin:0;
                  opacity: 0.6;
                  font-weight: 400;
                }
              }
            }

            &__top {
              transform: rotateX(-90deg);
              transform-origin: 0 0;
              background: yellow !important;


            }

            &__bottom {
              transform: rotateX(90deg);
              background: purple !important;
              transform-origin: 0 ($player_cube_height);
            }

            &__left {
              background: #354752 !important;
              transform: rotateY(90deg);
              transform-origin: 0 0;

              .options {
                left: 150px;
                top: 60px;
                position: absolute;
                transform: rotatey(254deg) translatez(57px);

                i {    color: white;
                  font-size: 24px;
                  display: block;
                  margin-bottom: 53px;
                  transition: all .3s;
                  cursor: pointer;

                  &:hover {
                    color: #44f5b7
                  }
                }
              }
            }

            &__right {
              background: #354752 !important;
              transform: rotateY(-90deg);
              transform-origin: ($player_cube_height) 0;
              .volume {
                left: 210px;
                top: 60px;
                position: absolute;
                &_pip {
                  width: 40px;
                  height: 6px;

                  margin-bottom: 10px;
                  background: #ffffff2e;

                  &:nth-of-type(14),
                  &:nth-of-type(13),
                  &:nth-of-type(12),
                  &:nth-of-type(11){
                    background: #44f5b7;
                  }

                  &:nth-of-type(10),
                  &:nth-of-type(9),
                  &:nth-of-type(8),
                  &:nth-of-type(7){
                    background: #f5c844;
                  }

                  &:nth-of-type(6),
                  &:nth-of-type(5){
                    background: #f54444;
                  }
                }
                i {
                  transform: rotatez(180deg) rotatey(89deg);
                  color: white;
                  font-size: 20px;
                  position: relative;
                  left: 10px;
                  top: 24px;
                  opacity: 0;
                  transition: all .3s;
                }
              }
            }
          }
        }
      }

      &__bottom {
        height: $player_bottom_height;
        padding: 30px;
        & .controls {
          clear: left;
          margin-top: 26px;
          &_left {
            float: left;
            width: 30%;
            text-align: right;
            font-size: 20px;
            color: white;    
            position: relative;
            top: 20px;
          }
          &_middle {
            float: left;
            width: 40%;
            font-size: 50px;
            color: white;
            text-align: center;
          }
          &_right {
            float: right;    
            position: relative;
            top: 20px;
            width: 30%;
            font-size: 20px;
            color: white;
            text-align: left;
          }
        }

        & .options {
          text-align: center;
          color: white;font-size: 12px;
          margin-bottom: 20px;
          i {
            padding: 5px;
            &:nth-of-type(1){
              color:#44f5b7;
            }
            &:nth-of-type(2){
              opacity: 0.4
            }
          }
        }
        & .playbar {
          width: 100%;
          background: #2c3e38;
          height: 4px;
          position: relative;
          border-radius: 10px;

          &_inner {
            position: absolute;
            width: 40%;
            height: 100%;
            border-radius: 10px;
            background:#44f5b7;
          }

          &_left {
            float: left;
            position: relative;
            top: 8px;
          }

          &_right {
            position: relative;
            top: 8px;
            float: right;
          }

          span {
            color: white;
            font-size: 10px;
          }

        }
      }
    }
  }
}

@keyframes eq {
  0% {height: 30px}
  50% {height: 100px;}
  100% {height: 30px;}
}

View Compiled

// Nope

This Pen is owned by Jamie Coulter on CodePen.

See more by @jcoulterdesign on CodePen

External CSS

External JavaScript