小编Mac*_*acK的帖子

我有以下标记:

<div class="cube trigger cuberotate">
    <div class="face init f z"></div>
    <div class="face init l y"></div>
    <div class="face init b z"></div>
    <div class="face init r y"></div>
    <div class="face init u x"></div>
    <div class="face init d x"></div>
</div>

它类似于一个三维立方体,每个面都旋转并转换到它们的正确位置,我让立方体在面部的父级上使用动画旋转.

这是相关的css:

.cube {
  position: absolute;
  cursor: pointer;

  width: 120px;
  height: 120px;

  top: 0;
  left: 0;

  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.face {
  position: absolute;

  width: 120px;
  height: 120px;

  border: 0px solid #fff;
  background: #c82222;

  transform-origin: 50% 50%;

  opacity: 1;
  padding: 0px;

  -webkit-touch-callout: …