lab-css

純CSS太陽系

transform-style: preserve-3dによる惑星軌道儀。軌道の傾き・公転・自転をすべてCSSアニメーションで表現し、ホバーすると時が止まる。

全画面で見る
3D Transformsanimation-play-state操作: ホバー

ホバーすると公転が止まります

対応ブラウザ

CSS機能Chrome / EdgeFirefoxSafari備考
3D Transforms対応対応対応preserve-3d / perspective
animation-play-state対応対応対応全主要ブラウザ対応

コード

表示中のコードは作品の実行に使われているものと同一ソースです。そのままコピーして試せます。

/* 純CSS太陽系: preserve-3dの軌道儀。ホバーで時が止まる */

.work-pure-orrery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  display: grid;
  place-items: center;
  perspective: 1100px;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 75% 55%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 25% 90%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 65% 85%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(100% 100% at 50% 50%, #101322 0%, #05060d 100%);
}

/* 盤面全体を傾ける */
.po-tilt {
  position: relative;
  width: 96cqmin;
  height: 96cqmin;
  transform-style: preserve-3d;
  transform: rotateX(62deg);
}

.po-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13cqmin;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff7d6, #ffb347 65%, #ff7a3d);
  box-shadow:
    0 0 5cqmin rgba(255, 180, 80, 0.9),
    0 0 14cqmin rgba(255, 140, 60, 0.45);
  animation: po-breath 5s ease-in-out infinite;
}

@keyframes po-breath {
  0%, 100% { box-shadow: 0 0 5cqmin rgba(255, 180, 80, 0.9), 0 0 14cqmin rgba(255, 140, 60, 0.45); }
  50% { box-shadow: 0 0 7cqmin rgba(255, 190, 90, 1), 0 0 18cqmin rgba(255, 150, 70, 0.6); }
}

/* ---- 軌道 ---- */

.po-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--d);
  height: var(--d);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: po-spin var(--dur) linear infinite;
}

.po-o1 { --d: 26cqmin; --dur: 5s; }
.po-o2 { --d: 40cqmin; --dur: 9s; }
.po-o3 { --d: 55cqmin; --dur: 15s; }
.po-o4 { --d: 70cqmin; --dur: 24s; }
.po-o5 { --d: 90cqmin; --dur: 38s; }

@keyframes po-spin {
  to { transform: rotateZ(360deg); }
}

.po-holder {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
}

/* 公転の逆回転で自転軸を固定し、盤の傾きを打ち消して球に見せる */
.po-counter {
  transform-style: preserve-3d;
  animation: po-counter-spin var(--dur) linear infinite;
}

@keyframes po-counter-spin {
  to { transform: rotateZ(-360deg); }
}

.po-planet {
  display: block;
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotateX(-62deg);
  background: radial-gradient(circle at 34% 30%, var(--hi), var(--lo) 75%);
  box-shadow: 0 0 2.5cqmin color-mix(in srgb, var(--hi) 45%, transparent);
}

.po-mercury { --s: 3.6cqmin; --hi: #d9d4cc; --lo: #77706a; }
.po-venus   { --s: 5cqmin;  --hi: #ffe9c4; --lo: #c98f4e; }
.po-earth   { --s: 5.4cqmin; --hi: #9fd8ff; --lo: #1d5db0; }
.po-mars    { --s: 4.4cqmin; --hi: #ffb08a; --lo: #b0421f; }
.po-saturn  { --s: 6cqmin;  --hi: #f4e2b8; --lo: #b08d54; }

/* 土星の環 */
.po-saturn {
  position: relative;
}

.po-saturn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210%;
  height: 210%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 0.7cqmin solid rgba(230, 205, 150, 0.55);
  transform: rotateX(72deg);
}

/* ホバーで公転を止める（animation-play-state） */
.work-pure-orrery:hover .po-orbit,
.work-pure-orrery:hover .po-counter,
.work-pure-orrery:hover .po-sun {
  animation-play-state: paused;
}

/* 動きへの配慮: 停止し、CSSのみのチェックボックスでオプトイン再生 */
@media (prefers-reduced-motion: reduce) {
  .work-pure-orrery * {
    animation-play-state: paused !important;
  }

  .work-pure-orrery .motion-optin {
    display: inline-flex;
  }

  .work-pure-orrery:has(.motion-optin input:checked) * {
    animation-play-state: running !important;
  }
}