/* --- body --- */
body {
		width:					1000px;
		font-family:			Arial, Helvetica;
		font-size:				1em;
		color:					#333333;
		background-color:		#111111;
		margin-top:				10px;
		margin-bottom:			10px;
		margin-left:			auto;
		margin-right:			auto;
}

/* --- Links --- */
a { 	color:					green;
		text-decoration:		none;
		border:			#aaaaaa, ;	
}
a:hover {
		color:					orange;
		text-decoration:		underline;
}
a:visited { 
color: blue;}
a:active {  color: red;}

/* --- Hervorhebungen --- */
span {
		color: 					#111111; 
		background-color: 		#ffffFF;

		letter-spacing: 		2px;
}

span.ST {
		color: 					orange; 
		background-color: 		#000000;
		
}
option.e	{color: 					#ff3399; 
		background-color: 		#222222;
		letter-spacing: 		1px;	}
		option.er	{color: 					#ffff00; 
		background-color: 		#222222;
		letter-spacing: 		1px;	}
		option.de	{color: 					#00ff00; 
		background-color: 		#222222;
		letter-spacing: 		1px	}
		option.d	{color: 					#00ccff; 
		background-color: 		#222222;
		letter-spacing: 		1px	}
		option.dr	{color: 					#ff3399; 
		background-color: 		#222222;
		letter-spacing: 		1px	}

	

/* --- Kopfzeile für Logo und Titel --- */
#header{
		Padding: 				5px; 
		margin-bottom: 				5px; 
		Border-top: 				1px solid #222222;
			Border-left: 				1px solid #222222;
				Border-right: 				1px solid #222222;
					Border-bottom: 				3px solid magenta;
		Min-height:				50px;
		background-color: 		#000000;
}

#header h1 {
		font-size:				2em;
		text-align:				center;
		color:					#ffffff;
		font-style:				italic
}

#header img {	float:					left;
		border:					0px solid #222222
}

/* --- Navigationsbereich --- */


#nav	 {
		width:					72px;
height:   auto;
		padding:				5px;
		border:					1px solid white;
		background-color:		#000000;
		margin-LEFT:			8px;
		margin-right:			8px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
		border-top-right-radius: 15px
}
#nav2	 {
		width:					210px;
		padding:				5px;
		border:					1px solid white;
		background-color:		#111111;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
		border-radius: 15px;
		text-align: center}
		
#nav3	 {
		width:					210px;
		padding:				5px;
		border:					1px solid white;
		background-color:		Black;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
		border-top-right-radius: 15px;
		text-align: center		
}
#bell	 {
		width:					227.9px;
		padding:				5px;
		border:					1px solid red;
		background-color:		#ffc700;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
}

/* --- Inhaltsbereich --- */
#content {		background-color:#000000;
				padding:		20px;
				margin-left:	0px;
				margin-right:	0px;
				color:			#ffffff;
				
}
	
#content h2 {	color:			#ffffff	}
	
#content h1 {	color:			#ffffff;
				background-color:#111111;
				width:			auto;text-align: center}
#content img.its{	width:		135px;
				height:			200px;
			
				margin:			15px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its2{	width:		400px;
				height:			200px;
				
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
				
#content img.its4{	width:		345px;
				height:			195px;
	
				margin:			13px;
				Padding:		0px;
				Background-color:	#ff3399;}
#content img.its5{	width:		731px;
				height:			200px;
			
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its3{	width:		922px;
				height:			390px;
			
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
				
#content img.its7{	width:		405px;
				height:			880px;
				
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its6{	width:		221px;
				height:			420px;
				
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its8{	width:		922px;
				height:			auto;
				
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its9{	width:		922px;
				height:			auto;
				
				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its10{	width:		290px;
				height:			auto;
				
				margin:			10px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its11{	width:		125px;
				height:			auto;
				
				margin:			2px;
				Padding:		0px;
				Background-color:	#ff3399}
				
img.its12{	
width:		70px;
				height: 40px;
				margin:			0px;
				Padding:		0px;
				Background-color:	black;}
				
tr.htt{		background-color:	#222222;}
#content img.HOME{	
		width:					227px;
		height:					300px;
		padding:				3.2px;
		border:					0px solid black;
		background-color:		orange;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
		}
		
#content img.HOME3{	
		width:					215px;
		height:					300px;
		padding:				5px;
		border:					1px solid black;
		background-color:		#ff3399;
		margin-LEFT:			2,5px;
		margin-right:			2,5px;
		margin-top:				0px;
		margin-bottom:			0px;
		
}

#content img.HOME2{	
		width:					227.9px;
		height:					300px;
		padding:				3.2px;
		border:					1px solid red;
		background-color:		#ff3399;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
		}
		
		
#content img.L{	
		width:					950px;
		height:					auto;
		padding:				3.2px;
		border:					1px solid black;
		background-color:		blue;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
	}
	
/* --- Fußzeile --- */
#footer {Padding: 				5px; 
		Margin: 				0px;
		Border-bottom: 				1px solid #222222;
		Min-height:				50px;
		background-color: 		#222222;
			Border-left: 				1px solid #222222;
				Border-right: 				1px solid #222222;	
				Border-top: 				3px solid green;
		text-align:				center;
		color:					#ffffff;
	
}
HR		{border: 				5px double #222222;
}

$background: #222;
$leftFace: #D53A33;
$rightFace: #E79C10;
$topFace: #1d9099;
$scale: 1;
$duration: 3s;
$timingFunction: ease;}

body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100vw;
  margin:0;
  padding:0;
  background:$background;
}

.container {
  position:relative;
  height:100px;
  width:86px;
  transform:scale(#{$scale * .5});
}

.cube {
  position:absolute;
  width:86px;
  height:100px;
}

.right {
  background:$rightFace;
  transform: rotate(-30deg) skewX(-30deg) translate(49px, 65px) scaleY(0.86);
}

.left {
  background:$leftFace;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.86) translate(25px, -50px);
}

.top {
  background:$topFace;
  transform: rotate(210deg) skew(-30deg) translate(-75px, -22px) scaleY(0.86);
  z-index:2;
}

.face {
  height:50px;
  width:50px;
  position:absolute;
  transform-origin: 0 0;
}

@mixin slice($h, $w, $l) {
  .h#{$h}.w#{$w}.l#{$l} {
    z-index: (-#{$h});
    animation-name: h#{$h}w#{$w}l#{$l};
    animation-timing-function: $timingFunction;
    animation-duration: $duration;
    animation-iteration-count: infinite;
    }
  @keyframes h#{$h}w#{$w}l#{$l} {
    0% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    } 
    14% {
      transform:translate(($w * -50% - 50%) + ($l * 100% - 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 50 - 25%));
    }
    28% {
      transform:translate(($w * -100% + 50%) + ($l * 100% - 50%), ($h * 50 - 200%) + ($w * 50% - 75%) + ($l * 50 - 25%));
    }
    43% {
      transform:translate(($w * -100% - 100%) + ($l * 100% + 100%), ($h * 100 - 400%) + ($w * 50% - 50%) + ($l * 50 + 50%));
    }
    57% {
      transform:translate(($w * -100% - 100%) + ($l * 50% + 200%), ($h * 100 - 400%) + ($w * 50% - 50%) + ($l * 25 + 100%));
    }
    71% {
      transform:translate(($w * -50% - 200%) + ($l * 50% + 200%), ($h * 100 - 375%) + ($w * 25% - 25%) + ($l * 25 + 100%));
    }
    85% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    }
    100% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    }
  }
}

@mixin generateSlice() {
  @for $i from 1 to 4 {
    @for $j from 1 to 4 {
      @for $k from 1 to 4 {
        @include slice($i, $j, $k);
      }
    }
  }
}

@include generateSlice();
View Compiled