User:Clarification needed/Sandbox/styles.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* cc: shorthand term for "CSS Cube" */
.cc-scene {
  --cc-width: 200px;
	--cc-height: 200px;
  --cc-minsize: min(var(--cc-width), var(--cc-height));
  margin: 25px;
	width: var(--cc-width);
	height: var(--cc-height);
	perspective: calc(var(--cc-minsize)*3);
}
.cc-cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--cc-minsize)/-2)) rotate3d(-1,0,0,30deg) rotate3d(0,1,0,-50deg);
  animation: 5s linear cc-3DSpin infinite;
}
.cc-side {
	position: absolute;
	background-color: #FFF;
	outline: 1px solid #CCC;
	width: var(--cc-width);
	height: var(--cc-height);
  background-size: cover;
}
/*Sides*/
.cc-side.top {
	transform: rotateX(90deg) translateZ(calc(var(--cc-minsize)/2)) ;
}
.cc-side.right {
	transform: rotateY(90deg) translateZ(calc(var(--cc-minsize)/2)) ;
}
.cc-side.front {
	transform: rotateY(0deg) translateZ(calc(var(--cc-minsize)/2)) ;
}
.cc-side.bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--cc-minsize)/2)) ;
}
.cc-side.left {
	transform: rotateY(-90deg) translateZ(calc(var(--cc-minsize)/2)) ;
}
.cc-side.back { 
	transform: rotateY(180deg) translateZ(calc(var(--cc-minsize)/2)) ;
}

.cc-side.left, .cc-side.right, .cc-side.front, .cc-side.back {
  background-image: url("https://www.sncapedia.org/images/thumb/8/81/Shit_nobody_cares_about_science_lover.png/200px-Shit_nobody_cares_about_science_lover.png");
}

.cc-SNCAText {
  margin: 0;
  position: absolute;
	text-align: center;
	font-family: 'Georgia', Georgia, serif;
  font-size: 130px;
	line-height: 0.8;
  left:50%;
  top:50%;
  transform: translateY(-50%) translateX(-50%);
}
/*Spin or something*/
@keyframes cc-3DSpin {
  from {
    transform: translateZ(calc(var(--cc-minsize)/-2)) rotate3d(-1,0,0,30deg) rotate3d(0,1,0,-50deg);
  }
  to {transform: translateZ(calc(var(--cc-minsize)/-2)) rotate3d(-1,0,0,30deg) rotate3d(0,1,0,-410deg);}
}