Semantic-UI 形状立方体类型

Semantic-UI 是一款流行的现代化前端框架，提供了许多有用且易于使用的组件。其形状立方体类型是其中的一种，可用于添加精美的三维交互效果。

基本用法

在使用形状立方体类型之前，需要先添加 Semantic-UI 的 CSS 和 JavaScript 文件。你可以使用官方提供的 CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

现在你可以创建一个含有形状立方体的 HTML 元素了：

<div class="ui segment cube">
  <div class="side front">前</div>
  <div class="side back">后</div>
  <div class="side top">上</div>
  <div class="side bottom">下</div>
  <div class="side left">左</div>
  <div class="side right">右</div>
</div>

使用 ui segment 类让这个元素取得 Semantic-UI 的样式。cube 类会将这个元素转换为立方体。其中的子元素使用 side 类定义，分别代表立方体的6个面。你可以自行添加 CSS 样式来改变这些面的颜色、字体等。

配置选项

可以使用 data-* 属性更改形状立方体的一些配置选项。以下是其中两个常用选项：

data-duration

用于定义立方体旋转的时间。默认是 500ms。

<div class="ui segment cube" data-duration="1000">
  <div class="side front">前</div>
  <div class="side back">后</div>
  <div class="side top">上</div>
  <div class="side bottom">下</div>
  <div class="side left">左</div>
  <div class="side right">右</div>
</div>

data-inverted

用于定义立方体旋转时是否翻转内容。默认是 false。

<div class="ui segment cube" data-inverted="true">
  <div class="side front">前</div>
  <div class="side back">后</div>
  <div class="side top">上</div>
  <div class="side bottom">下</div>
  <div class="side left">左</div>
  <div class="side right">右</div>
</div>

事件

可以通过 JavaScript 获取和修改形状立方体的属性和状态，例如监听立方体旋转的开始和结束：

$('.cube').on('rotatestart', function() {
  console.log('旋转开始');
});

$('.cube').on('rotateend', function() {
  console.log('旋转结束');
});

例子

以下是一个完整的例子，使用四个形状立方体实现 3D 菱形效果：

<div class="diamond-container">
  <div class="ui segment cube diamond-front">
    <div class="side front">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
  </div>
  <div class="ui segment cube diamond-back">
    <div class="side front">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
  </div>
  <div class="ui segment cube diamond-left">
    <div class="side front">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
  </div>
  <div class="ui segment cube diamond-right">
    <div class="side front">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
  </div>
</div>

.diamond-container {
  perspective: 800px;
  perspective-origin: center top;
}

.diamond-front {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotateY(0deg) translateZ(50%);
  z-index: 4;
}

.diamond-back {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotateY(-180deg) translateZ(50%);
  z-index: 3;
}

.diamond-left {
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotateY(-90deg) translateZ(50%);
  z-index: 2;
}

.diamond-right {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) rotateY(90deg) translateZ(50%);
  z-index: 1;
}

在这个例子中，我们使用了 perspective 属性和 translate3d、rotateY 等变换来定义形状立方体的位置和旋转。你可以自行尝试添加和修改样式以达到你想要的效果。