三次元

金の月。十六夜の頃。

相変わらず無駄に忙しい。なので今夜も現実逃避。いつの間にか css で三次元的な移動や変形ができるようになっていたので、色々試してみよう。仕事でも趣味でもきっと使わないと思うが、何ができるかは押さえておきたいし。

ということで、まずやってみたのがこれ。平家物語。

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理を顕す。奢れる人も久しからず、ただ春の夜の夢の如し。猛き者も遂にはほろびぬ、偏に風の前の塵に同じ。

html


<div class="smpl1">
  <div>
    祇園精舎の…
  </div>
</div>

css


.smpl1 {
  perspective: 500px;
}
.smpl1 div {
  transform-style: preserve-3d;
  transform: rotateX( 30deg ) rotateY( 20deg );
}

css はポイントだけ。特に説明の必要も無いと思うが、X軸周りに30度回転し、次いでY軸周りに20度回転している。

ちなみに座標は左手系。左上が原点で、X軸は右方向、Y軸は下方向、Z軸は画面手前方向。

折角なので動かしてみた。 STAR WARS のオープニング風に。

html


<div class="smpl2">
  <div>
    祇園精舎の…
  </div>
</div>

css


.smpl2 {
  background-color: black;
  perspective: 400px;
}
.smpl2 div {
  transform-style: preserve-3d;
  animation: mv2 20s linear infinite;
}
@keyframes mv2 {
    0% { transform: rotateX( 60deg ) translateY(   300px ) }
  100% { transform: rotateX( 60deg ) translateY( -1000px ) }
}

光も影も無い簡易三次元表現ではあるが、いや、だからこそ、なのかもしれないが、レンダリングは結構綺麗。動かしても破綻しない。それが数行書くだけで実現できるとか、ほんと、便利な世の中になったよなぁ…。

続きは後日。