New mission: revamp the portals to make them look actually tolerable to the eye. They are currently placeholders as of now.
The Gold Network: Soyworld | SNCApedia | SoyPlace

I'm not dead, just inactive for the moment. Faggot (talk) 20:16, 9 April 2026 (UTC)

Template:3DCube/style.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
← Older editNewer edit →
No edit summary
Tag: Manual revert
No edit summary
Line 1: Line 1:
/* Template:3DCube/styles.css
/* cc: shorthand term for "CSS Cube", now semi-CSS2 compliant! */
  Hardware-accelerated 2D matrix simulation of a 3D cube.
.cc-scene {
  Fully compatible with MediaWiki CSS sanitizers. */
margin: 25px;
 
width: 200px;
.mw-3dcube-scene {
height: 200px;
    width: 200px;
    height: 200px;
    position: relative;
    /* Scaling is handled inline by the template */
}
}
 
.cc-cube {
.mw-3dcube {
width: 100%;
    width: 100%;
height: 100%;
    height: 100%;
position: relative;
    position: relative;
}
}


.mw-3dcube-face {
.cc-center {
    position: absolute;
animation: 10s linear cc-3DSpin infinite;
    width: 200px;
width: 100%;
    height: 200px;
height: 100%;
    top: 0;
    left: 0;
    transform-origin: 50% 50%;
    overflow: hidden;
    background-color: transparent;
}
}


/* Force inner images to perfectly fill the face */
.cc-side {
.mw-3dcube-face img {
position: absolute;
    display: block;
background-color: #FFF;
    width: 100% !important;
outline: 1px solid #CCC;
    height: 100% !important;
width: 200px;
    border: none !important;
height: 200px;
    object-fit: cover;
background-size: cover;
}
}


/* Base animations */
.cc-SNCAText {
.mw-3dcube-front  { animation: mw-3dcube-front  8s linear infinite; }
margin: 0;
.mw-3dcube-right  { animation: mw-3dcube-right  8s linear infinite; }
position: absolute;
.mw-3dcube-back  { animation: mw-3dcube-back  8s linear infinite; }
text-align: center;
.mw-3dcube-left  { animation: mw-3dcube-left  8s linear infinite; }
font-family: 'Georgia', Georgia, serif;
.mw-3dcube-top    { animation: mw-3dcube-top    8s linear infinite; z-index: 4; }
font-size: 130px;
.mw-3dcube-bottom { animation: mw-3dcube-bottom 8s linear infinite; z-index: 0; }
line-height: 0.8;
 
left:50%;
/* Optional: pause rotation on hover */
top:50%;
.mw-3dcube-scene:hover .mw-3dcube-face { animation-play-state: paused; }
transform: translateY(-50%) translateX(-50%);
 
/* --- Orthographic 2D Matrix Keyframes --- */
@keyframes mw-3dcube-front {
    0%    { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
    12.5% { transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
    25%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
    37.5% { transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
    50%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
    62.5% { transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
    75%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
    87.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
    100% { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
}
}
 
/*Spin or something*/
@keyframes mw-3dcube-right {
@keyframes cc-3DSpin {
    0%    { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
from {
    12.5% { transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
transform: rotate(0deg);
    25%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
}
    37.5% { transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
to {
    50%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
transform: rotate(360deg);
    62.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
}
    75%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
    87.5% { transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
    100%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
}
 
@keyframes mw-3dcube-back {
    0%    { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
    12.5% { transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
    25%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
    37.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
    50%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
    62.5% { transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
    75%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
    87.5% { transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
    100%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
}
 
@keyframes mw-3dcube-left {
    0%    { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
    12.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
    25%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
    37.5% { transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
    50%  { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
    62.5% { transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
    75%  { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
    87.5% { transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
    100%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
}
 
@keyframes mw-3dcube-top {
    0%    { transform: matrix(1, 0, 0.707, 0.354, 0, -86.6); }
    12.5% { transform: matrix(0.707, -0.354, 0.707, 0.354, 0, -86.6); }
    25%  { transform: matrix(0, -0.5, 1, 0, 0, -86.6); }
    37.5% { transform: matrix(-0.707, -0.354, 0.707, -0.354, 0, -86.6); }
    50%  { transform: matrix(-1, 0, 0, -0.5, 0, -86.6); }
    62.5% { transform: matrix(-0.707, 0.354, -0.707, -0.354, 0, -86.6); }
    75%  { transform: matrix(0, 0.5, -1, 0, 0, -86.6); }
    87.5% { transform: matrix(0.707, 0.354, -0.707, 0.354, 0, -86.6); }
    100%  { transform: matrix(1, 0, 0.707, 0.354, 0, -86.6); }
}
 
@keyframes mw-3dcube-bottom {
    0%    { transform: matrix(1, 0, 0.707, 0.354, 0, 86.6); }
    12.5% { transform: matrix(0.707, -0.354, 0.707, 0.354, 0, 86.6); }
    25%  { transform: matrix(0, -0.5, 1, 0, 0, 86.6); }
    37.5% { transform: matrix(-0.707, -0.354, 0.707, -0.354, 0, 86.6); }
    50%  { transform: matrix(-1, 0, 0, -0.5, 0, 86.6); }
    62.5% { transform: matrix(-0.707, 0.354, -0.707, -0.354, 0, 86.6); }
    75%  { transform: matrix(0, 0.5, -1, 0, 0, 86.6); }
    87.5% { transform: matrix(0.707, 0.354, -0.707, 0.354, 0, 86.6); }
    100%  { transform: matrix(1, 0, 0.707, 0.354, 0, 86.6); }
}
}

Revision as of 20:08, 13 April 2026

/* cc: shorthand term for "CSS Cube", now semi-CSS2 compliant! */
.cc-scene {
	margin: 25px;
	width: 200px;
	height: 200px;
}
.cc-cube {
	width: 100%;
	height: 100%;
	position: relative;
}

.cc-center {
	animation: 10s linear cc-3DSpin infinite;
	width: 100%;
	height: 100%;
}

.cc-side {
	position: absolute;
	background-color: #FFF;
	outline: 1px solid #CCC;
	width: 200px;
	height: 200px;
	background-size: cover;
}

.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: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube/style.css&oldid=30311"