-# 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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  2. https://codepen.io/jcoulterdesign/pen/01b9068757aee968ce90c9e8b6782c41.scss

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/jcoulterdesign/pen/01b9068757aee968ce90c9e8b6782c41.js