Template:3DOneFace/styles.css: Difference between revisions

/* Template:3DOneFace/style.css
   Inline 3D swinging text with predefined validator-safe angle tiers */

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

/* Hover instantly kills ONLY the active animations and snaps flat to 0deg */
.cc-scene:hover .cc-sm-15, .cc-scene:hover .cc-rd-15,
.cc-scene:hover .cc-sm-30, .cc-scene:hover .cc-rd-30,
.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 {
    animation: none !important;
    transform: rotate(0deg) !important;
}

/* Clean up image wrappers */
.cc-side a.image, .cc-side figure {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 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); } }

/* ===== 60 DEGREE TIER ===== */
.cc-sm-60 { animation: cc-s-60 ease-in-out infinite; }
.cc-rd-60 { animation: cc-r-60 ease-in-out infinite; }
@keyframes cc-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); } }

/* ===== 90 DEGREE TIER ===== */
.cc-sm-90 { animation: cc-s-90 ease-in-out infinite; }
.cc-rd-90 { animation: cc-r-90 ease-in-out infinite; }
@keyframes cc-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); } }

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