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

/* Template:3DOneFace/styles.css
   Single face 3D swing — mirrors cc-3DCube structure */

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

.onef-cube {
  display: inline-block;
  position: relative;
}

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

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

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

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

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

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

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

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