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:3DOneFace/styles.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
testing
 
mNo edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ================================
/* Template:3DOneFace/styles.css
  Template:3DOneFace/styles.css
   Inline 3D swinging text. Namespaced with onef- to avoid conflicts */
   Single-face fake-3D jiggle
  Uses 2D transforms only (CSS2 safe)
  ================================ */


 
.onef-scene, .onef-axis, .onef-side {
/* === CORE === */
    display: inline-block;
 
    vertical-align: middle;
.onef-wrapper {
  display: inline-block;
  vertical-align: middle;
}
}


.onef-face {
/* Hover instantly kills ONLY the active animations and snaps flat to 0deg */
  display: inline-block;
.onef-scene:hover .onef-sm-15, .onef-scene:hover .onef-rd-15,
  animation-name: onef-jiggle-normal;
.onef-scene:hover .onef-sm-30, .onef-scene:hover .onef-rd-30,
  animation-timing-function: ease-in-out;
.onef-scene:hover .onef-sm-45, .onef-scene:hover .onef-rd-45,
  animation-iteration-count: infinite;
.onef-scene:hover .onef-sm-60, .onef-scene:hover .onef-rd-60,
.onef-scene:hover .onef-sm-90, .onef-scene:hover .onef-rd-90 {
    animation: none !important;
    transform: rotate(0deg) !important;
}
}


 
/* Clean up image wrappers */
/* === INTENSITY LEVELS === */
.onef-side a.image, .onef-side figure {
 
    background: transparent !important;
.onef-low    .onef-face { animation-name: onef-jiggle-low; }
    border: none !important;
.onef-normal .onef-face { animation-name: onef-jiggle-normal; }
    box-shadow: none !important;
.onef-high  .onef-face { animation-name: onef-jiggle-high; }
    padding: 0 !important;
 
    margin: 0 !important;
 
/* === KEYFRAMES: LOW (±5°) === */
 
@keyframes onef-jiggle-low {
  0%  { transform: skewY(0deg) scaleX(1); }
  12%  { transform: skewY(3deg) scaleX(0.998); }
  25%  { transform: skewY(-4deg) scaleX(0.997) skewX(1deg); }
  40%  { transform: skewY(2deg) scaleX(0.999) skewX(-1deg); }
  55%  { transform: skewY(-5deg) scaleX(0.996); }
  70%  { transform: skewY(4deg) scaleX(0.997) skewX(2deg); }
  85%  { transform: skewY(-2deg) scaleX(0.999); }
  100% { transform: skewY(0deg) scaleX(1); }
}
}
 
.onef-side img, .onef-side video {
 
    width: 100%; height: 100%; object-fit: contain;  
/* === KEYFRAMES: NORMAL (±12°) === */
 
@keyframes onef-jiggle-normal {
  0%  { transform: skewY(0deg) scaleX(1); }
  10%  { transform: skewY(8deg) scaleX(0.986) skewX(2deg); }
  23%  { transform: skewY(-7deg) scaleX(0.991) skewX(-4deg); }
  38%  { transform: skewY(5deg) scaleX(0.994) skewX(3deg); }
  52%  { transform: skewY(-11deg) scaleX(0.978); }
  67% { transform: skewY(9deg) scaleX(0.983) skewX(-3deg); }
  80%  { transform: skewY(-4deg) scaleX(0.993) skewX(5deg); }
  91%  { transform: skewY(10deg) scaleX(0.981) skewX(-2deg); }
  100% { transform: skewY(0deg) scaleX(1); }
}
 
 
/* === KEYFRAMES: HIGH (±22°) === */
 
@keyframes onef-jiggle-high {
  0%  { transform: skewY(0deg) scaleX(1); }
  9%  { transform: skewY(16deg) scaleX(0.927) skewX(4deg); }
  21%  { transform: skewY(-13deg) scaleX(0.954) skewX(-8deg); }
  35%  { transform: skewY(10deg) scaleX(0.966) skewX(6deg); }
  50%  { transform: skewY(-20deg) scaleX(0.906); }
  64%  { transform: skewY(15deg) scaleX(0.940) skewX(-5deg); }
  78%  { transform: skewY(-8deg) scaleX(0.972) skewX(10deg); }
  90%  { transform: skewY(19deg) scaleX(0.912) skewX(-3deg); }
  100% { transform: skewY(0deg) scaleX(1); }
}
}


/* ===== 15 DEGREE TIER ===== */
.onef-sm-15 { animation: onef-s-15 ease-in-out infinite; }
.onef-rd-15 { animation: onef-r-15 ease-in-out infinite; }
@keyframes onef-s-15 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { 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); } }


/* === HOVER: SNAP FLAT === */
/* ===== 30 DEGREE TIER ===== */
 
.onef-sm-30 { animation: onef-s-30 ease-in-out infinite; }
.onef-wrapper:hover .onef-face {
.onef-rd-30 { animation: onef-r-30 ease-in-out infinite; }
  animation-play-state: paused;
@keyframes onef-s-30 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } }
  transform: skewY(0deg) scaleX(1);
@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); } }
  transition: transform 0.15s ease-out;
}


.onef-nohover:hover .onef-face {
/* ===== 45 DEGREE TIER ===== */
  animation-play-state: running;
.onef-sm-45 { animation: onef-s-45 ease-in-out infinite; }
  transform: none;
.onef-rd-45 { animation: onef-r-45 ease-in-out infinite; }
  transition: none;
@keyframes onef-s-45 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(45deg); } 75% { 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 ===== */
.onef-sm-60 { animation: onef-s-60 ease-in-out infinite; }
.onef-rd-60 { animation: onef-r-60 ease-in-out infinite; }
@keyframes onef-s-60 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(60deg); } 75% { 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); } }


/* === REDUCED MOTION SAFETY === */
/* ===== 90 DEGREE TIER ===== */
.onef-sm-90 { animation: onef-s-90 ease-in-out infinite; }
.onef-rd-90 { animation: onef-r-90 ease-in-out infinite; }
@keyframes onef-s-90 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 75% { 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) {
@media (prefers-reduced-motion: reduce) {[class*="onef-sm-"], [class*="onef-rd-"] { animation: none !important; }
  .onef-face {
    animation: none;
    transform: none;
  }
  .onef-wrapper:hover .onef-face {
    transform: none;
    transition: none;
  }
}
}

Latest revision as of 20:13, 18 April 2026

/* Template:3DOneFace/styles.css
   Inline 3D swinging text. Namespaced with onef- to avoid conflicts */

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

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

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

/* ===== 15 DEGREE TIER ===== */
.onef-sm-15 { animation: onef-s-15 ease-in-out infinite; }
.onef-rd-15 { animation: onef-r-15 ease-in-out infinite; }
@keyframes onef-s-15 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { 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 ===== */
.onef-sm-30 { animation: onef-s-30 ease-in-out infinite; }
.onef-rd-30 { animation: onef-r-30 ease-in-out infinite; }
@keyframes onef-s-30 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(30deg); } 75% { 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 ===== */
.onef-sm-45 { animation: onef-s-45 ease-in-out infinite; }
.onef-rd-45 { animation: onef-r-45 ease-in-out infinite; }
@keyframes onef-s-45 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(45deg); } 75% { 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 ===== */
.onef-sm-60 { animation: onef-s-60 ease-in-out infinite; }
.onef-rd-60 { animation: onef-r-60 ease-in-out infinite; }
@keyframes onef-s-60 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(60deg); } 75% { 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 ===== */
.onef-sm-90 { animation: onef-s-90 ease-in-out infinite; }
.onef-rd-90 { animation: onef-r-90 ease-in-out infinite; }
@keyframes onef-s-90 { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 75% { 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*="onef-sm-"], [class*="onef-rd-"] { animation: none !important; }
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:3DOneFace/styles.css&oldid=31429"