Template:3DOneFace/styles.css - Revision history

SomebodyRum at 20:13, 18 April 2026

2026-04-18T20:13:25Z

← Older revision		Revision as of 20:13, 18 April 2026
Line 1:		Line 1:
	/* Template:3DOneFace/~~style~~.css		/* Template:3DOneFace/styles.css
	Inline 3D swinging text with ~~predefined validator~~-~~safe angle tiers~~ */		Inline 3D swinging text. Namespaced with onef- to avoid conflicts */

	.cc-scene, .cc-axis, .cc-side {		.onef-scene, .onef-axis, .onef-side {
	display: inline-block;		display: inline-block;
	vertical-align: middle;		vertical-align: middle;
Line 8:		Line 8:

	/* Hover instantly kills ONLY the active animations and snaps flat to 0deg */		/* Hover instantly kills ONLY the active animations and snaps flat to 0deg */
	.cc-scene:hover .cc-sm-15, .cc-scene:hover .cc-rd-15,		.onef-scene:hover .onef-sm-15, .onef-scene:hover .onef-rd-15,
	.cc-scene:hover .cc-sm-30, .cc-scene:hover .cc-rd-30,		.onef-scene:hover .onef-sm-30, .onef-scene:hover .onef-rd-30,
	.cc-scene:hover .cc-sm-45, .cc-scene:hover .cc-rd-45,		.onef-scene:hover .onef-sm-45, .onef-scene:hover .onef-rd-45,
	.cc-scene:hover .cc-sm-60, .cc-scene:hover .cc-rd-60,		.onef-scene:hover .onef-sm-60, .onef-scene:hover .onef-rd-60,
	.cc-scene:hover .cc-sm-90, .cc-scene:hover .cc-rd-90 {		.onef-scene:hover .onef-sm-90, .onef-scene:hover .onef-rd-90 {
	animation: none !important;		animation: none !important;
	transform: rotate(0deg) !important;		transform: rotate(0deg) !important;
Line 18:		Line 18:

	/* Clean up image wrappers */		/* Clean up image wrappers */
	.cc-side a.image, .cc-side figure {		.onef-side a.image, .onef-side figure {
	background: transparent !important;		background: transparent !important;
	border: none !important;		border: none !important;
Line 25:		Line 25:
	margin: 0 !important;		margin: 0 !important;
	}		}
	.cc-side img, .cc-side video {		.onef-side img, .onef-side video {
	width: 100%; height: 100%; object-fit: contain;		width: 100%; height: 100%; object-fit: contain;
	}		}

	/* ===== 15 DEGREE TIER ===== */		/* ===== 15 DEGREE TIER ===== */
	.cc-sm-15 { animation: cc-s-15 ease-in-out infinite; }		.onef-sm-15 { animation: onef-s-15 ease-in-out infinite; }
	.cc-rd-15 { animation: cc-r-15 ease-in-out infinite; }		.onef-rd-15 { animation: onef-r-15 ease-in-out infinite; }
	@keyframes cc-s-15 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }		@keyframes onef-s-15 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
	@keyframes cc-r-15 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(15deg); } 40%, 55% { transform: rotate(-7deg); } 65%, 75% { transform: rotate(7deg); } 85%, 95% { transform: rotate(-15deg); } }		@keyframes onef-r-15 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(15deg); } 40%, 55% { transform: rotate(-7deg); } 65%, 75% { transform: rotate(7deg); } 85%, 95% { transform: rotate(-15deg); } }

	/* ===== 30 DEGREE TIER ===== */		/* ===== 30 DEGREE TIER ===== */
	.cc-sm-30 { animation: cc-s-30 ease-in-out infinite; }		.onef-sm-30 { animation: onef-s-30 ease-in-out infinite; }
	.cc-rd-30 { animation: cc-r-30 ease-in-out infinite; }		.onef-rd-30 { animation: onef-r-30 ease-in-out infinite; }
	@keyframes cc-s-30 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } }		@keyframes onef-s-30 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } }
	@keyframes cc-r-30 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(30deg); } 40%, 55% { transform: rotate(-15deg); } 65%, 75% { transform: rotate(15deg); } 85%, 95% { transform: rotate(-30deg); } }		@keyframes onef-r-30 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(30deg); } 40%, 55% { transform: rotate(-15deg); } 65%, 75% { transform: rotate(15deg); } 85%, 95% { transform: rotate(-30deg); } }

	/* ===== 45 DEGREE TIER ===== */		/* ===== 45 DEGREE TIER ===== */
	.cc-sm-45 { animation: cc-s-45 ease-in-out infinite; }		.onef-sm-45 { animation: onef-s-45 ease-in-out infinite; }
	.cc-rd-45 { animation: cc-r-45 ease-in-out infinite; }		.onef-rd-45 { animation: onef-r-45 ease-in-out infinite; }
	@keyframes cc-s-45 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(45deg); } 75% { transform: rotate(-45deg); } }		@keyframes onef-s-45 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(45deg); } 75% { transform: rotate(-45deg); } }
	@keyframes cc-r-45 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(45deg); } 40%, 55% { transform: rotate(-22deg); } 65%, 75% { transform: rotate(22deg); } 85%, 95% { transform: rotate(-45deg); } }		@keyframes onef-r-45 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(45deg); } 40%, 55% { transform: rotate(-22deg); } 65%, 75% { transform: rotate(22deg); } 85%, 95% { transform: rotate(-45deg); } }

	/* ===== 60 DEGREE TIER ===== */		/* ===== 60 DEGREE TIER ===== */
	.cc-sm-60 { animation: cc-s-60 ease-in-out infinite; }		.onef-sm-60 { animation: onef-s-60 ease-in-out infinite; }
	.cc-rd-60 { animation: cc-r-60 ease-in-out infinite; }		.onef-rd-60 { animation: onef-r-60 ease-in-out infinite; }
	@keyframes cc-s-60 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(60deg); } 75% { transform: rotate(-60deg); } }		@keyframes onef-s-60 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(60deg); } 75% { transform: rotate(-60deg); } }
	@keyframes cc-r-60 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(60deg); } 40%, 55% { transform: rotate(-30deg); } 65%, 75% { transform: rotate(30deg); } 85%, 95% { transform: rotate(-60deg); } }		@keyframes onef-r-60 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(60deg); } 40%, 55% { transform: rotate(-30deg); } 65%, 75% { transform: rotate(30deg); } 85%, 95% { transform: rotate(-60deg); } }

	/* ===== 90 DEGREE TIER ===== */		/* ===== 90 DEGREE TIER ===== */
	.cc-sm-90 { animation: cc-s-90 ease-in-out infinite; }		.onef-sm-90 { animation: onef-s-90 ease-in-out infinite; }
	.cc-rd-90 { animation: cc-r-90 ease-in-out infinite; }		.onef-rd-90 { animation: onef-r-90 ease-in-out infinite; }
	@keyframes cc-s-90 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 75% { transform: rotate(-90deg); } }		@keyframes onef-s-90 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 75% { transform: rotate(-90deg); } }
	@keyframes cc-r-90 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(90deg); } 40%, 55% { transform: rotate(-45deg); } 65%, 75% { transform: rotate(45deg); } 85%, 95% { transform: rotate(-90deg); } }		@keyframes onef-r-90 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(90deg); } 40%, 55% { transform: rotate(-45deg); } 65%, 75% { transform: rotate(45deg); } 85%, 95% { transform: rotate(-90deg); } }

	@media (prefers-reduced-motion: reduce) {[class="cc-sm-"], [class="cc-rd-"] { animation: none !important; }		@media (prefers-reduced-motion: reduce) {[class="onef-sm-"], [class="onef-rd-"] { animation: none !important; }
	}		}

SomebodyRum at 17:14, 18 April 2026

2026-04-18T17:14:00Z

← Older revision		Revision as of 17:14, 18 April 2026
Line 1:		Line 1:
	/* Template:3DOneFace/style.css		/* Template:3DOneFace/style.css
	~~Single face left~~-~~to-right swing, inline text friendly~~ */		Inline 3D swinging text with predefined validator-safe angle tiers */

	.cc-scene {		.cc-scene, .cc-axis, .cc-side {
	display: inline-block;		display: inline-block;
	vertical-align: middle;		vertical-align: middle;
	}		}

	/* ~~Ensure all nested spans flow inline without breaking paragraphs~~ */		/* Hover instantly kills ONLY the active animations and snaps flat to 0deg */
	.cc-~~cube~~, .cc-~~center~~, .cc-~~side {~~		.cc-scene:hover .cc-sm-15, .cc-scene:hover .cc-rd-15,
	~~display~~: ~~inline~~-~~block;~~		.cc-scene:hover .cc-sm-30, .cc-scene:hover .cc-rd-30,
	~~vertical~~-~~align~~: ~~middle;~~		.cc-scene:hover .cc-sm-45, .cc-scene:hover .cc-rd-45,
	}		.cc-scene:hover .cc-sm-60, .cc-scene:hover .cc-rd-60,
			.cc-scene:hover .cc-sm-90, .cc-scene:hover .cc-rd-90 {
	.cc-~~center {~~		animation: none !important;
	~~animation~~: cc-~~Swing 4s ease~~-in-~~out infinite;~~		transform: rotate(0deg) !important;
	}

	~~/* Hovering instantly kills the animation and snaps it flat for reading */~~
	.cc-scene:hover .cc-~~center~~ {
	animation: none;
	transform: rotate(0deg);
	}		}

	/* Clean up image ~~backgrounds if an image is used~~ */		/* Clean up image wrappers */
	.cc-side a.image,		.cc-side a.image, .cc-side figure {
	.cc-side figure {
	background: transparent !important;		background: transparent !important;
	border: none !important;		border: none !important;
Line 32:		Line 25:
	margin: 0 !important;		margin: 0 !important;
	}		}
			.cc-side img, .cc-side video {
			width: 100%; height: 100%; object-fit: contain;
			}

			/* ===== 15 DEGREE TIER ===== */
			.cc-sm-15 { animation: cc-s-15 ease-in-out infinite; }
			.cc-rd-15 { animation: cc-r-15 ease-in-out infinite; }
			@keyframes cc-s-15 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
			@keyframes cc-r-15 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(15deg); } 40%, 55% { transform: rotate(-7deg); } 65%, 75% { transform: rotate(7deg); } 85%, 95% { transform: rotate(-15deg); } }

			/* ===== 30 DEGREE TIER ===== */
			.cc-sm-30 { animation: cc-s-30 ease-in-out infinite; }
			.cc-rd-30 { animation: cc-r-30 ease-in-out infinite; }
			@keyframes cc-s-30 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } }
			@keyframes cc-r-30 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(30deg); } 40%, 55% { transform: rotate(-15deg); } 65%, 75% { transform: rotate(15deg); } 85%, 95% { transform: rotate(-30deg); } }

			/* ===== 45 DEGREE TIER ===== */
			.cc-sm-45 { animation: cc-s-45 ease-in-out infinite; }
			.cc-rd-45 { animation: cc-r-45 ease-in-out infinite; }
			@keyframes cc-s-45 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(45deg); } 75% { transform: rotate(-45deg); } }
			@keyframes cc-r-45 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(45deg); } 40%, 55% { transform: rotate(-22deg); } 65%, 75% { transform: rotate(22deg); } 85%, 95% { transform: rotate(-45deg); } }

	.cc-~~side img,~~		/* ===== 60 DEGREE TIER ===== */
	.cc-~~side video~~ {		.cc-sm-60 { animation: cc-s-60 ease-in-out infinite; }
	~~width~~: ~~100~~%;		.cc-rd-60 { animation: cc-r-60 ease-in-out infinite; }
	~~height~~: ~~100~~%;		@keyframes cc-s-60 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(60deg); } 75% { transform: rotate(-60deg); } }
	~~object~~-~~fit~~: ~~contain~~;		@keyframes cc-r-60 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(60deg); } 40%, 55% { transform: rotate(-30deg); } 65%, 75% { transform: rotate(30deg); } 85%, 95% { transform: rotate(-60deg); } }
	}

	/* ~~The actual swing limits. Uses standard 2D rotate to pass validation!~~ */		/* ===== 90 DEGREE TIER ===== */
	@keyframes cc-~~Swing~~ {		.cc-sm-90 { animation: cc-s-90 ease-in-out infinite; }
	0% { transform: rotate(-~~35deg~~); }		.cc-rd-90 { animation: cc-r-90 ease-in-out infinite; }
	50% { transform: rotate(~~35deg~~); }		@keyframes cc-s-90 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 75% { transform: rotate(-90deg); } }
	~~100~~% { transform: rotate(-~~35deg~~); }		@keyframes cc-r-90 { 0%, 100% { transform: rotate(0deg); } 15%, 30% { transform: rotate(90deg); } 40%, 55% { transform: rotate(-45deg); } 65%, 75% { transform: rotate(45deg); } 85%, 95% { transform: rotate(-90deg); } }
	}

	@media (prefers-reduced-motion: reduce) {		@media (prefers-reduced-motion: reduce) {[class="cc-sm-"], [class="cc-rd-"] { animation: none !important; }
	.cc-~~center~~ { animation: none; }
	}		}

SomebodyRum at 17:06, 18 April 2026

2026-04-18T17:06:46Z

← Older revision		Revision as of 17:06, 18 April 2026
Line 1:		Line 1:
	/* Template:3DOneFace/style.css		/* Template:3DOneFace/style.css
	Single face left-to-right swing ~~based on 3DCube~~ */		Single face left-to-right swing, inline text friendly */

	.cc-scene {		.cc-scene {
	~~margin~~: ~~25px auto~~;		display: inline-block;
			vertical-align: middle;
	}		}

	.cc-cube {		/* Ensure all nested spans flow inline without breaking paragraphs */
	~~width~~: ~~100%~~;		.cc-cube, .cc-center, .cc-side {
	~~height: 100%;~~		display: inline-block;
	~~position~~: ~~relative~~;		vertical-align: middle;
	}		}

	.cc-center {		.cc-center {
	animation: cc-Swing 4s ease-in-out infinite;		animation: cc-Swing 4s ease-in-out infinite;
	~~width: 100%;~~
	~~height: 100%;~~
	}

	~~.cc-side {~~
	~~position: absolute;~~
	~~width: 100%;~~
	~~height: 100%;~~

	~~background-color: transparent;~~

	~~display: flex;~~
	~~justify-content: center;~~
	~~align-items: center;~~
	~~text-align: center;~~
	}		}

	/* ~~Pause~~ and ~~snap to center on hover~~ */		/* Hovering instantly kills the animation and snaps it flat for reading */
	.cc-scene:hover .cc-center {		.cc-scene:hover .cc-center {
	animation~~-play-state~~: ~~paused~~;		animation: none;
	transform: rotate(0deg);		transform: rotate(0deg);
	~~transition: transform 0.2s ease-out;~~
	}		}

	/* Clean up image backgrounds */		/* Clean up image backgrounds if an image is used */
	.cc-side a.image,		.cc-side a.image,
	.cc-side figure {		.cc-side figure {
Line 57:		Line 42:
	/* The actual swing limits. Uses standard 2D rotate to pass validation! */		/* The actual swing limits. Uses standard 2D rotate to pass validation! */
	@keyframes cc-Swing {		@keyframes cc-Swing {
	0% { transform: rotate(-~~45deg~~); }		0% { transform: rotate(-35deg); }
	50% { transform: rotate(~~45deg~~); }		50% { transform: rotate(35deg); }
	100% { transform: rotate(-~~45deg~~); }		100% { transform: rotate(-35deg); }
	}		}

SomebodyRum at 16:55, 18 April 2026

2026-04-18T16:55:34Z

@@ Line 1: / Line 1: @@
-@keyframes onef-swing-normal {
+/* Template:3DOneFace/style.css
-%   { transform: rotate(-45deg); }
+   Single face left-to-right swing based on 3DCube */
-%  { transform: rotate(45deg); }
-% { transform: rotate(-45deg); }
+.cc-scene {
+}
-/* (Make sure the others use standard rotate() too, and same for the hover state) */
+@media (prefers-reduced-motion: reduce) {
-.onef-scene:hover .onef-center {
+    .cc-center { animation: none; }
+}

SomebodyRum at 16:51, 18 April 2026

2026-04-18T16:51:33Z

@@ Line 1: / Line 1: @@
 @keyframes onef-swing-normal {
 %   { transform: rotate(-45deg); }
@@ Line 34: / Line 5: @@
+}
-@keyframes onef-swing-high {
+/* (Make sure the others use standard rotate() too, and same for the hover state) */
 .onef-scene:hover .onef-center {
    animation-play-state: paused;
    transform: rotate(0deg);
    transition: transform 0.15s ease-out;
+}

SomebodyRum at 16:42, 18 April 2026

2026-04-18T16:42:17Z

← Older revision		Revision as of 16:42, 18 April 2026
Line 1:		Line 1:
			/* Template:3DOneFace/styles.css
			Single face 3D swing — mirrors cc-3DCube structure */

	.onef-scene {		.onef-scene {
	display: inline-block;		display: inline-block;
			margin: 4px;
	}		}

Line 10:		Line 14:
	.onef-center {		.onef-center {
	display: inline-block;		display: inline-block;
	animation-timing-function: ~~linear~~;		animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
	}		}

	.onef-low .onef-center { animation-name: onef-~~spin~~-low; }		.onef-low .onef-center { animation-name: onef-swing-low; }
	.onef-normal .onef-center { animation-name: onef-~~spin~~-normal; }		.onef-normal .onef-center { animation-name: onef-swing-normal; }
	.onef-high .onef-center { animation-name: onef-~~spin~~-high; }		.onef-high .onef-center { animation-name: onef-swing-high; }

	@keyframes onef-~~spin~~-low {		@keyframes onef-swing-low {
	~~from~~ { transform: rotate(~~0deg~~); }		0% { transform: rotate(-20deg); }
	to { transform: rotate(~~360deg~~); }		50% { transform: rotate(20deg); }
			100% { transform: rotate(-20deg); }
	}		}

	@keyframes onef-~~spin~~-normal {		@keyframes onef-swing-normal {
	~~from~~ { transform: rotate(~~0deg~~); }		0% { transform: rotate(-45deg); }
	to { transform: rotate(~~360deg~~); }		50% { transform: rotate(45deg); }
			100% { transform: rotate(-45deg); }
	}		}

	@keyframes onef-~~spin~~-high {		@keyframes onef-swing-high {
	~~from~~ { transform: rotate(~~0deg~~); }		0% { transform: rotate(-70deg); }
	to { transform: rotate(~~360deg~~); }		50% { transform: rotate(70deg); }
			100% { transform: rotate(-70deg); }
	}		}

	.onef-scene:hover .onef-center {		.onef-scene:hover .onef-center {
	animation-play-state: paused;		animation-play-state: paused;
			transform: rotate(0deg);
			transition: transform 0.15s ease-out;
	}		}

	.onef-nohover:hover .onef-center {		.onef-nohover:hover .onef-center {
	animation-play-state: running;		animation-play-state: running;
			transform: none;
			transition: none;
	}		}

	@media (prefers-reduced-motion: reduce) {		@media (prefers-reduced-motion: reduce) {
	.onef-center {		.onef-center { animation: none; }
	animation: none;
	}
	}		}

SomebodyRum at 16:37, 18 April 2026

2026-04-18T16:37:07Z

← Older revision		Revision as of 16:37, 18 April 2026
Line 1:		Line 1:
	~~/* ================================~~		.onef-scene {
	~~Template~~:~~3DOneFace/styles.css~~		display: inline-block;
	~~================================ */~~		}

	.onef-~~wrapper~~ {		.onef-cube {
	display: inline-block;		display: inline-block;
	~~vertical-align~~: ~~middle~~;		position: relative;
	}		}

	.onef-~~face~~ {		.onef-center {
	display: inline-block;		display: inline-block;
	animation-timing-function: ~~ease-in-out~~;		animation-timing-function: linear;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
	}		}

	.onef-low .onef-~~face~~ { animation-name: onef-~~rock~~-low; }		.onef-low .onef-center { animation-name: onef-spin-low; }
	.onef-normal .onef-~~face~~ { animation-name: onef-~~rock~~-normal; }		.onef-normal .onef-center { animation-name: onef-spin-normal; }
	.onef-high .onef-~~face~~ { animation-name: onef-~~rock~~-high; }		.onef-high .onef-center { animation-name: onef-spin-high; }

	@keyframes onef-~~rock~~-low {		@keyframes onef-spin-low {
	0% { transform: rotate(~~-15deg~~); }		from { transform: rotate(0deg); }
	~~50% { transform: rotate(15deg); }~~		to { transform: rotate(360deg); }
	~~100%~~ { transform: rotate(~~-15deg~~); }
	}		}

	@keyframes onef-~~rock~~-normal {		@keyframes onef-spin-normal {
	0% { transform: rotate(~~-40deg~~); }		from { transform: rotate(0deg); }
	~~50% { transform: rotate(40deg); }~~		to { transform: rotate(360deg); }
	~~100%~~ { transform: rotate(~~-40deg~~); }
	}		}

	@keyframes onef-~~rock~~-high {		@keyframes onef-spin-high {
	0% { transform: rotate(~~-70deg~~); }		from { transform: rotate(0deg); }
	~~50% { transform: rotate(70deg); }~~		to { transform: rotate(360deg); }
	~~100%~~ { transform: rotate(~~-70deg~~); }
	}		}

	.onef-~~wrapper~~:hover .onef-~~face~~ {		.onef-scene:hover .onef-center {
	animation-play-state: paused;		animation-play-state: paused;
	~~transform: rotate(0deg);~~
	~~transition: transform 0.15s ease-out;~~
	}		}

	.onef-nohover:hover .onef-~~face~~ {		.onef-nohover:hover .onef-center {
	animation-play-state: running;		animation-play-state: running;
	~~transform: none;~~
	~~transition: none;~~
	}		}

	@media (prefers-reduced-motion: reduce) {		@media (prefers-reduced-motion: reduce) {
	.onef-~~face~~ {		.onef-center {
	animation: none;		animation: none;
	~~transform: none;~~
	}		}
	}		}

SomebodyRum at 16:32, 18 April 2026

2026-04-18T16:32:59Z

← Older revision		Revision as of 16:32, 18 April 2026
Line 1:		Line 1:
	/* ================================		/* ================================
	Template:3DOneFace/styles.css		Template:3DOneFace/styles.css
	~~Flat card rocking left-to-right~~
	================================ */		================================ */


	~~/* === CORE === */~~

	.onef-wrapper {		.onef-wrapper {
Line 14:		Line 10:
	.onef-face {		.onef-face {
	display: inline-block;		display: inline-block;
	~~animation-name: onef-rock-normal;~~
	animation-timing-function: ease-in-out;		animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
	}		}


	~~/* === INTENSITY LEVELS === */~~

	.onef-low .onef-face { animation-name: onef-rock-low; }		.onef-low .onef-face { animation-name: onef-rock-low; }
	.onef-normal .onef-face { animation-name: onef-rock-normal; }		.onef-normal .onef-face { animation-name: onef-rock-normal; }
	.onef-high .onef-face { animation-name: onef-rock-high; }		.onef-high .onef-face { animation-name: onef-rock-high; }


	~~/* === KEYFRAMES: LOW === */~~

	@keyframes onef-rock-low {		@keyframes onef-rock-low {
	0% { transform: ~~scaleX~~(~~1); }~~		0% { transform: rotate(-15deg); }
	~~25% { transform: scaleX(0.80~~); }		50% { transform: rotate(15deg); }
	50% { transform: ~~scaleX(1); }~~		100% { transform: rotate(-15deg); }
	~~75% { transform: scaleX~~(~~0.80~~); }
	100% { transform: ~~scaleX~~(1); }
	}		}


	~~/* === KEYFRAMES: NORMAL === */~~

	@keyframes onef-rock-normal {		@keyframes onef-rock-normal {
	0% { transform: ~~scaleX~~(~~1); }~~		0% { transform: rotate(-40deg); }
	~~25% { transform: scaleX(0.45~~); }		50% { transform: rotate(40deg); }
	50% { transform: ~~scaleX(1); }~~		100% { transform: rotate(-40deg); }
	~~75% { transform: scaleX~~(~~0.45~~); }
	100% { transform: ~~scaleX~~(1); }
	}		}


	~~/* === KEYFRAMES: HIGH === */~~

	@keyframes onef-rock-high {		@keyframes onef-rock-high {
	0% { transform: ~~scaleX~~(~~1); }~~		0% { transform: rotate(-70deg); }
	~~25% { transform: scaleX(0.15~~); }		50% { transform: rotate(70deg); }
	50% { transform: ~~scaleX(1); }~~		100% { transform: rotate(-70deg); }
	~~75% { transform: scaleX~~(~~0.15~~); }
	100% { transform: ~~scaleX~~(1); }
	}		}


	~~/* === HOVER: SNAP FLAT === */~~

	.onef-wrapper:hover .onef-face {		.onef-wrapper:hover .onef-face {
	animation-play-state: paused;		animation-play-state: paused;
	transform: ~~scaleX~~(1);		transform: rotate(0deg);
	transition: transform 0.15s ease-out;		transition: transform 0.15s ease-out;
	}		}
Line 73:		Line 47:
	transition: none;		transition: none;
	}		}


	~~/* === REDUCED MOTION SAFETY === */~~

	@media (prefers-reduced-motion: reduce) {		@media (prefers-reduced-motion: reduce) {

SomebodyRum at 16:18, 18 April 2026

2026-04-18T16:18:51Z

← Older revision		Revision as of 16:18, 18 April 2026
Line 1:		Line 1:
	/* ================================		/* ================================
	Template:3DOneFace/styles.css		Template:3DOneFace/styles.css
	~~Fake~~-~~3D via scale + rotate mix~~		Flat card rocking left-to-right
	================================ */		================================ */

Line 14:		Line 14:
	.onef-face {		.onef-face {
	display: inline-block;		display: inline-block;
	animation-name: onef-~~jiggle~~-normal;		animation-name: onef-rock-normal;
	animation-timing-function: ease-in-out;		animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;		animation-iteration-count: infinite;
Line 22:		Line 22:
	/* === INTENSITY LEVELS === */		/* === INTENSITY LEVELS === */

	.onef-low .onef-face { animation-name: onef-~~jiggle~~-low; }		.onef-low .onef-face { animation-name: onef-rock-low; }
	.onef-normal .onef-face { animation-name: onef-~~jiggle~~-normal; }		.onef-normal .onef-face { animation-name: onef-rock-normal; }
	.onef-high .onef-face { animation-name: onef-~~jiggle~~-high; }		.onef-high .onef-face { animation-name: onef-rock-high; }


	/* === KEYFRAMES: LOW === */		/* === KEYFRAMES: LOW === */

	@keyframes onef-~~jiggle~~-low {		@keyframes onef-rock-low {
	0% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }		0% { transform: scaleX(1); }
	14% { transform: scaleX(0.~~82) scaleY(0.97) rotate(-2deg~~); }		25% { transform: scaleX(0.80); }
	30% { transform: scaleX(~~0.95) scaleY(0.80) rotate(1deg~~); }		50% { transform: scaleX(1); }
	~~47% { transform: scaleX(0.~~75~~) scaleY(0.93) rotate(2deg); }~~		75% { transform: scaleX(0.80); }
	61% { transform: scaleX(0.~~92) scaleY(0.78) rotate(-1deg); }~~		100% { transform: scaleX(1); }
	~~78% { transform: scaleX(0.78) scaleY(0.96) rotate(3deg); }~~
	~~90% { transform: scaleX(0.90) scaleY(0.84) rotate(-2deg~~); }
	100% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }
	}		}

Line 43:		Line 40:
	/* === KEYFRAMES: NORMAL === */		/* === KEYFRAMES: NORMAL === */

	@keyframes onef-~~jiggle~~-normal {		@keyframes onef-rock-normal {
	0% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }		0% { transform: scaleX(1); }
	11% { transform: scaleX(0.~~55) scaleY(0.94) rotate(-4deg~~); }		25% { transform: scaleX(0.45); }
	~~26% { transform: scaleX(0.90) scaleY(0.~~50~~) rotate(3deg); }~~		50% { transform: scaleX(1); }
	39% { transform: scaleX(~~0.42) scaleY(0.88) rotate(5deg~~); }		75% { transform: scaleX(0.45); }
	54% { transform: scaleX~~(0.86) scaleY~~(0.45~~) rotate(-3deg); }~~		100% { transform: scaleX(1); }
	~~67% { transform: scaleX(0.48) scaleY(0.91) rotate(-5deg); }~~
	~~81% { transform: scaleX(0.80) scaleY(0.55) rotate(4deg); }~~
	~~93% { transform: scaleX(0.38) scaleY(0.85) rotate(-2deg~~); }
	100% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }
	}		}

Line 58:		Line 51:
	/* === KEYFRAMES: HIGH === */		/* === KEYFRAMES: HIGH === */

	@keyframes onef-~~jiggle~~-high {		@keyframes onef-rock-high {
	0% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }		0% { transform: scaleX(1); }
	~~9% { transform: scaleX(0.28) scaleY(0.92) rotate(-7deg); }~~		25% { transform: scaleX(0.15); }
	22% { transform: scaleX(0.~~88) scaleY(0.22) rotate(6deg~~); }		50% { transform: scaleX(1); }
	36% { transform: scaleX(~~0.18) scaleY(0.85) rotate(9deg~~); }		75% { transform: scaleX(0.15); }
	51% { transform: scaleX(0.~~82) scaleY(0.20) rotate(-6deg); }~~		100% { transform: scaleX(1); }
	~~63% { transform: scaleX(0.24) scaleY(0.90) rotate(-9deg); }~~
	~~77% { transform: scaleX(0.85) scaleY(0.26) rotate(7deg); }~~
	~~89% { transform: scaleX(0.20) scaleY(0.82) rotate(-4deg~~); }
	100% { transform: scaleX(1~~) scaleY(1) rotate(0deg~~); }
	}		}

Line 75:		Line 64:
	.onef-wrapper:hover .onef-face {		.onef-wrapper:hover .onef-face {
	animation-play-state: paused;		animation-play-state: paused;
	transform: scaleX(1~~) scaleY(1) rotate(0deg~~);		transform: scaleX(1);
	transition: transform 0.15s ease-out;		transition: transform 0.15s ease-out;
	}		}
Line 92:		Line 81:
	animation: none;		animation: none;
	transform: none;		transform: none;
	}
	~~.onef-wrapper:hover .onef-face {~~
	~~transform: none;~~
	~~transition: none;~~
	}		}
	}		}

SomebodyRum at 16:16, 18 April 2026

2026-04-18T16:16:16Z

← Older revision		Revision as of 16:16, 18 April 2026
Line 1:		Line 1:
	/* ================================		/* ================================
	Template:3DOneFace/styles.css		Template:3DOneFace/styles.css
	Fake-3D via ~~foreshortening only~~		Fake-3D via scale + rotate mix
	~~2D transforms — MediaWiki safe~~
	================================ */		================================ */

Line 29:		Line 28:

	/* === KEYFRAMES: LOW === */		/* === KEYFRAMES: LOW === */
	~~/* subtle tilt, card barely moves away from viewer */~~

	@keyframes onef-jiggle-low {		@keyframes onef-jiggle-low {
	0% { transform: scaleX(1) scaleY(1); }		0% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	14% { transform: scaleX(0.88) scaleY(0.97); }		14% { transform: scaleX(0.82) scaleY(0.97) rotate(-2deg); }
	30% { transform: scaleX(0.95) scaleY(0.85); }		30% { transform: scaleX(0.95) scaleY(0.80) rotate(1deg); }
	47% { transform: scaleX(0.82) scaleY(0.93); }		47% { transform: scaleX(0.75) scaleY(0.93) rotate(2deg); }
	61% { transform: scaleX(0.91) scaleY(0.80); }		61% { transform: scaleX(0.92) scaleY(0.78) rotate(-1deg); }
	78% { transform: scaleX(0.86) scaleY(0.96); }		78% { transform: scaleX(0.78) scaleY(0.96) rotate(3deg); }
	90% { transform: scaleX(0.93) scaleY(0.88); }		90% { transform: scaleX(0.90) scaleY(0.84) rotate(-2deg); }
	100% { transform: scaleX(1) scaleY(1); }		100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	}		}


	/* === KEYFRAMES: NORMAL === */		/* === KEYFRAMES: NORMAL === */
	~~/* noticeable random tilt in 3D space */~~

	@keyframes onef-jiggle-normal {		@keyframes onef-jiggle-normal {
	0% { transform: scaleX(1) scaleY(1); }		0% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	11% { transform: scaleX(0.72) scaleY(0.94); }		11% { transform: scaleX(0.55) scaleY(0.94) rotate(-4deg); }
	26% { transform: scaleX(0.90) scaleY(0.65); }		26% { transform: scaleX(0.90) scaleY(0.50) rotate(3deg); }
	39% { transform: scaleX(0.58) scaleY(0.88); }		39% { transform: scaleX(0.42) scaleY(0.88) rotate(5deg); }
	54% { transform: scaleX(0.85) scaleY(0.60); }		54% { transform: scaleX(0.86) scaleY(0.45) rotate(-3deg); }
	67% { transform: scaleX(0.63) scaleY(0.91); }		67% { transform: scaleX(0.48) scaleY(0.91) rotate(-5deg); }
	81% { transform: scaleX(0.79) scaleY(0.70); }		81% { transform: scaleX(0.80) scaleY(0.55) rotate(4deg); }
	93% { transform: scaleX(0.55) scaleY(0.86); }		93% { transform: scaleX(0.38) scaleY(0.85) rotate(-2deg); }
	100% { transform: scaleX(1) scaleY(1); }		100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	}		}


	/* === KEYFRAMES: HIGH === */		/* === KEYFRAMES: HIGH === */
	~~/* dramatic tilt, nearly edge-on at times */~~

	@keyframes onef-jiggle-high {		@keyframes onef-jiggle-high {
	0% { transform: scaleX(1) scaleY(1); }		0% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	9% { transform: scaleX(0.45) scaleY(0.92); }		9% { transform: scaleX(0.28) scaleY(0.92) rotate(-7deg); }
	22% { transform: scaleX(0.88) scaleY(0.38); }		22% { transform: scaleX(0.88) scaleY(0.22) rotate(6deg); }
	36% { transform: scaleX(0.32) scaleY(0.85); }		36% { transform: scaleX(0.18) scaleY(0.85) rotate(9deg); }
	51% { transform: scaleX(0.80) scaleY(0.30); }		51% { transform: scaleX(0.82) scaleY(0.20) rotate(-6deg); }
	63% { transform: scaleX(0.40) scaleY(0.90); }		63% { transform: scaleX(0.24) scaleY(0.90) rotate(-9deg); }
	77% { transform: scaleX(0.88) scaleY(0.42); }		77% { transform: scaleX(0.85) scaleY(0.26) rotate(7deg); }
	89% { transform: scaleX(0.35) scaleY(0.82); }		89% { transform: scaleX(0.20) scaleY(0.82) rotate(-4deg); }
	100% { transform: scaleX(1) scaleY(1); }		100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
	}		}

Line 79:		Line 75:
	.onef-wrapper:hover .onef-face {		.onef-wrapper:hover .onef-face {
	animation-play-state: paused;		animation-play-state: paused;
	transform: scaleX(1) scaleY(1);		transform: scaleX(1) scaleY(1) rotate(0deg);
	transition: transform 0.15s ease-out;		transition: transform 0.15s ease-out;
	}		}