User:Clarification needed/Sandbox/styles.css: Difference between revisions

/* cc: shorthand term for "CSS Cube" */
.cc-scene {
	margin: 25px;
	width: 200px;
	height: 200px;
	perspective: 600px;
}
.cc-cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(-100px) 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: 200px;
	height: 200px;
	background-size: cover;
}
/*Sides*/
.cc-side.top {
	transform: rotateX(90deg) translateZ(100px);
}
.cc-side.right {
	transform: rotateY(90deg) translateZ(100px);
}
.cc-side.front {
	transform: rotateY(0deg) translateZ(100px);
}
.cc-side.bottom {
	transform: rotateX(-90deg) translateZ(100px);
}
.cc-side.left {
	transform: rotateY(-90deg) translateZ(100px);
}
.cc-side.back { 
	transform: rotateY(180deg) translateZ(100px);
}

.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(-100px) rotate3d(-1,0,0,30deg) rotate3d(0,1,0,-50deg);
	}
	to {
		transform: translateZ(-100px) rotate3d(-1,0,0,30deg) rotate3d(0,1,0,-410deg);
	}
}