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 edit
No edit summary
No edit summary
Tag: Manual revert
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Template:3DCube/style.css */
/* Template:3DCube/styles.css
.scene {
  Hardware-accelerated 2D matrix simulation of a 3D cube.
width: 200px;
  Fully compatible with MediaWiki CSS sanitizers. */
height: 200px;
 
margin: 100px auto;
.mw-3dcube-scene {
position: relative;
    width: 200px;
    height: 200px;
    position: relative;
    /* Scaling is handled inline by the template */
}
 
.mw-3dcube {
    width: 100%;
    height: 100%;
    position: relative;
}
 
.mw-3dcube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    transform-origin: 50% 50%;
    overflow: hidden;
    background-color: transparent;
}
 
/* Force inner images to perfectly fill the face */
.mw-3dcube-face img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover;
}
 
/* Base animations */
.mw-3dcube-front  { animation: mw-3dcube-front  8s linear infinite; }
.mw-3dcube-right  { animation: mw-3dcube-right  8s linear infinite; }
.mw-3dcube-back  { animation: mw-3dcube-back  8s linear infinite; }
.mw-3dcube-left  { animation: mw-3dcube-left  8s linear infinite; }
.mw-3dcube-top    { animation: mw-3dcube-top    8s linear infinite; z-index: 4; }
.mw-3dcube-bottom { animation: mw-3dcube-bottom 8s linear infinite; z-index: 0; }
 
/* Optional: pause rotation on hover */
.mw-3dcube-scene:hover .mw-3dcube-face { animation-play-state: paused; }
 
/* --- 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; }
}
}


.cube {
@keyframes mw-3dcube-right {
width: 100%;
    0%    { transform: matrix(0, -0.5, 0, 0.866, 100, 0); z-index: 3; }
height: 100%;
    12.5% { transform: matrix(-0.707, -0.354, 0, 0.866, 70.7, -35.4); z-index: 2; }
position: relative;
    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; }
    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: 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; }
}
}


.cube-face {
@keyframes mw-3dcube-back {
position: absolute;
    0%    { transform: matrix(-1, 0, 0, 0.866, 0, -50); z-index: 1; }
width: 200px;
    12.5% { transform: matrix(-0.707, 0.354, 0, 0.866, -70.7, -35.4); z-index: 2; }
height: 200px;
    25%  { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
top: 0;
    37.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
left: 0;
    50%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
/* This animation mathematically projects 3D rotation into 2D space */
    62.5% { transform: matrix(0.707, -0.354, 0, 0.866, 70.7, 35.4); z-index: 5; }
animation: fake3D 8s linear infinite;
    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; }
}
}


/* Offsetting the start times creates the 4 sides of the 3D box */
@keyframes mw-3dcube-left {
.face-front { animation-delay: 0s; }
    0%    { transform: matrix(0, 0.5, 0, 0.866, -100, 0); z-index: 3; }
.face-right { animation-delay: -2s; }
    12.5% { transform: matrix(0.707, 0.354, 0, 0.866, -70.7, 35.4); z-index: 5; }
.face-back  { animation-delay: -4s; }
    25%  { transform: matrix(1, 0, 0, 0.866, 0, 50); z-index: 6; }
.face-left { animation-delay: -6s; }
    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; }
}


/* 16-step sine/cosine projection to simulate flawless 3D spinning */
@keyframes mw-3dcube-top {
@keyframes fake3D {
    0%   { transform: matrix(1, 0, 0.707, 0.354, 0, -86.6); }
0%     { transform: translateX(0px) scaleX(1); z-index: 4; }
    12.5% { transform: matrix(0.707, -0.354, 0.707, 0.354, 0, -86.6); }
6.25%  { transform: translateX(38.3px) scaleX(0.924); z-index: 4; }
    25%   { transform: matrix(0, -0.5, 1, 0, 0, -86.6); }
12.5%   { transform: translateX(70.7px) scaleX(0.707); z-index: 4; }
    37.5% { transform: matrix(-0.707, -0.354, 0.707, -0.354, 0, -86.6); }
18.75%  { transform: translateX(92.4px) scaleX(0.383); z-index: 3; }
    50%   { transform: matrix(-1, 0, 0, -0.5, 0, -86.6); }
25%     { transform: translateX(100px) scaleX(0); z-index: 3; }
    62.5% { transform: matrix(-0.707, 0.354, -0.707, -0.354, 0, -86.6); }
31.25%  { transform: translateX(92.4px) scaleX(-0.383); z-index: 2; }
    75%   { transform: matrix(0, 0.5, -1, 0, 0, -86.6); }
37.5%   { transform: translateX(70.7px) scaleX(-0.707); z-index: 2; }
    87.5% { transform: matrix(0.707, 0.354, -0.707, 0.354, 0, -86.6); }
43.75%  { transform: translateX(38.3px) scaleX(-0.924); z-index: 1; }
    100% { transform: matrix(1, 0, 0.707, 0.354, 0, -86.6); }
50%     { transform: translateX(0px) scaleX(-1); z-index: 1; }
56.25%  { transform: translateX(-38.3px) scaleX(-0.924); z-index: 1; }
62.5%   { transform: translateX(-70.7px) scaleX(-0.707); z-index: 2; }
68.75%  { transform: translateX(-92.4px) scaleX(-0.383); z-index: 2; }
75%     { transform: translateX(-100px) scaleX(0); z-index: 3; }
81.25%  { transform: translateX(-92.4px) scaleX(0.383); z-index: 3; }
87.5%   { transform: translateX(-70.7px) scaleX(0.707); z-index: 4; }
93.75%  { transform: translateX(-38.3px) scaleX(0.924); z-index: 4; }
100%   { transform: translateX(0px) scaleX(1); z-index: 4; }
}
}


/* Top/Bottom are hidden as 2D math cannot fake diagonal tumbling */
@keyframes mw-3dcube-bottom {
.face-top, .face-bottom {
    0%    { transform: matrix(1, 0, 0.707, 0.354, 0, 86.6); }
display: none;
    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); }
}
}

Latest revision as of 20:55, 12 April 2026

/* Template:3DCube/styles.css
   Hardware-accelerated 2D matrix simulation of a 3D cube.
   Fully compatible with MediaWiki CSS sanitizers. */

.mw-3dcube-scene {
    width: 200px;
    height: 200px;
    position: relative;
    /* Scaling is handled inline by the template */
}

.mw-3dcube {
    width: 100%;
    height: 100%;
    position: relative;
}

.mw-3dcube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    transform-origin: 50% 50%;
    overflow: hidden;
    background-color: transparent;
}

/* Force inner images to perfectly fill the face */
.mw-3dcube-face img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover;
}

/* Base animations */
.mw-3dcube-front  { animation: mw-3dcube-front  8s linear infinite; }
.mw-3dcube-right  { animation: mw-3dcube-right  8s linear infinite; }
.mw-3dcube-back   { animation: mw-3dcube-back   8s linear infinite; }
.mw-3dcube-left   { animation: mw-3dcube-left   8s linear infinite; }
.mw-3dcube-top    { animation: mw-3dcube-top    8s linear infinite; z-index: 4; }
.mw-3dcube-bottom { animation: mw-3dcube-bottom 8s linear infinite; z-index: 0; }

/* Optional: pause rotation on hover */
.mw-3dcube-scene:hover .mw-3dcube-face { animation-play-state: paused; }

/* --- 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; }
}

@keyframes mw-3dcube-right {
    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: 2; }
    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; }
    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: 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); }
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DCube/style.css&oldid=30163"