ちいつる

没入・リッチ演出

3Dオブジェクト操作

CSS 3D transformで立方体をドラッグ回転。慣性付き。

ENGLISH

3D Object Viewer

  • JS
約178行没入・リッチ演出 の一覧 →

プレビュー

ドラッグ

操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。

コード（コピーして使えます）

<div class="scene-wrap">
  <div class="stage" id="stage">
    <div class="cube" id="cube">
      <div class="face face-front">
        <span class="label">FRONT</span>
        <span class="sub">ちいつる</span>
      </div>
      <div class="face face-back">
        <span class="label">BACK</span>
        <span class="sub">chiisana.tools</span>
      </div>
      <div class="face face-left">
        <span class="label">LEFT</span>
      </div>
      <div class="face face-right">
        <span class="label">RIGHT</span>
      </div>
      <div class="face face-top">
        <span class="label">TOP</span>
      </div>
      <div class="face face-bottom">
        <span class="label">BOTTOM</span>
      </div>
    </div>
  </div>
  <p class="hint">ドラッグで回せます</p>
</div>

タグ

関連パーツ