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

.onef-scene {
  display: inline-block;
}

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

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

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

@keyframes onef-spin-low {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes onef-spin-normal {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes onef-spin-high {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.onef-scene:hover .onef-center {
  animation-play-state: paused;
}

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

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