ak-object 物体

Cube 立方体

单个预览

拖动滑块设置 X、Y、Z 轴旋转角度，或选择六面视角检查图标和边框。点击「重置」恢复初始角度。

X 轴 -20° Y 轴 30° Z 轴 0°

SOURCE / HTML

html

<div id="cube-preview" style="width: 100%; max-width: 480px">
  <div class="perspective" style="display: grid; place-items: center; height: 220px; perspective-origin: center">
    <div class="ak-cube" style="--cube-size: 100px; --cube-border-width: 4px; transform: rotateX(-20deg) rotateY(30deg) rotateZ(0deg)">
      <div class="ak-face front">
        <svg class="ak-icon" aria-hidden="true"><use href="#icon-warning"></use></svg>
        <div class="ak-face__lines">
          <i class="ak-face__line--tl"></i><i class="ak-face__line--tr"></i>
          <i class="ak-face__line--bl"></i><i class="ak-face__line--br"></i>
        </div>
      </div>
      <div class="ak-face back"></div><div class="ak-face right"></div>
      <div class="ak-face left"></div><div class="ak-face top"></div><div class="ak-face bottom"></div>
    </div>
  </div>
  <div style="display: grid; gap: 12px">
    <label style="display: flex; align-items: center; gap: 12px">X 轴
      <input type="range" name="x" aria-label="X 轴旋转" min="-180" max="180" value="-20" style="flex: 1; min-width: 0">
      <output style="width: 5ch; text-align: right">-20°</output>
    </label>
    <label style="display: flex; align-items: center; gap: 12px">Y 轴
      <input type="range" name="y" aria-label="Y 轴旋转" min="-180" max="180" value="30" style="flex: 1; min-width: 0">
      <output style="width: 5ch; text-align: right">30°</output>
    </label>
    <label style="display: flex; align-items: center; gap: 12px">Z 轴
      <input type="range" name="z" aria-label="Z 轴旋转" min="-180" max="180" value="0" style="flex: 1; min-width: 0">
      <output style="width: 5ch; text-align: right">0°</output>
    </label>
    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px" aria-label="预设视角">
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="front">正面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="back">背面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="left">左面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="right">右面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="top">顶面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="bottom">底面</button>
      <button class="ak-button" style="width: calc(25% - 6px); height: 36px" data-view="reset">重置</button>
    </div>
  </div>
</div>

<script>
  const preview = document.querySelector('#cube-preview')
  const cube = preview.querySelector('.ak-cube')
  const sliders = Array.from(preview.querySelectorAll('input[type="range"]'))
  const views = {
    front: [0, 0, 0], back: [0, 180, 0], left: [0, 90, 0],
    right: [0, -90, 0], top: [-90, 0, 0], bottom: [90, 0, 0],
    reset: [-20, 30, 0],
  }
  function update() {
    const [x, y, z] = sliders.map(slider => Number(slider.value))
    cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`
    sliders.forEach(slider => {
      slider.nextElementSibling.value = `${slider.value}°`
    })
  }
  sliders.forEach(slider => slider.addEventListener('input', update))
  preview.querySelectorAll('[data-view]').forEach(button => {
    button.addEventListener('click', () => {
      views[button.dataset.view].forEach((angle, index) => { sliders[index].value = angle })
      update()
    })
  })
</script>

战术地图

原生 JavaScript 示例生成了一组战术地图方块，不依赖 Vue 或其他运行时。

SOURCE / HTML

html

<div class="perspective" id="tactical-map" aria-label="战术地图"></div>

<script>
  const map = document.querySelector('#tactical-map')
  const cube = color => `
    <div class="ak-cube" style="--cube-size: 52px; --cube-border-width: 4px; ${color ? `--cube-color: ${color}` : ''}">
      <div class="ak-face front">
        <svg class="ak-icon" aria-hidden="true"><use href="#icon-warning"></use></svg>
        <div class="ak-face__lines">
          <i class="ak-face__line--tl"></i><i class="ak-face__line--tr"></i>
          <i class="ak-face__line--bl"></i><i class="ak-face__line--br"></i>
        </div>
      </div>
      <div class="ak-face back"></div><div class="ak-face right"></div>
      <div class="ak-face left"></div><div class="ak-face top"></div><div class="ak-face bottom"></div>
    </div>`

  map.innerHTML = Array.from({ length: 30 }, (_, index) => cube(index > 19 ? 'rgba(246, 84, 14, 0.65)' : '')).join('')
</script>

Variable	Description
`--cube-color`	立方体颜色
`--cube-size`	立方体宽高
`--cube-border-width`	立方体边框宽度

ak-object 物体 ​

Cube 立方体 ​

单个预览 ​

战术地图 ​

ak-object 物体

Cube 立方体

单个预览

战术地图