ios上css实现3d立方体旋转

在iOS上使用CSS实现3D立方体旋转可以通过使用CSS3的transform属性和perspective属性来实现。以下是一个简单的例子：

HTML代码：

<div class="cube">
  <div class="side">1</div>
  <div class="side">2</div>
  <div class="side">3</div>
  <div class="side">4</div>
  <div class="side">5</div>
  <div class="side">6</div>
</div>

CSS代码：

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  perspective: 800px;
}
.side {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 48px;
  color: white;
  background: black;
  opacity: 0.8;
  border: 2px solid white;
}
.side:nth-child(1) {
  transform: rotateY(0deg) translateZ(50px);
}
.side:nth-child(2) {
  transform: rotateY(90deg) translateZ(50px);
}
.side:nth-child(3) {
  transform: rotateY(180deg) translateZ(50px);
}
.side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(50px);
}
.side:nth-child(5) {
  transform: rotateX(90deg) translateZ(50px);
}
.side:nth-child(6) {
  transform: rotateX(-90deg) translateZ(50px);
}
.cube:hover {
  transform: rotateX(360deg) rotateY(360deg);
}

在这个例子中，我们使用了一个包含6个面的div元素，并使用transform属性将其转换为3D立方体。然后，我们使用nth-child选择器来为每个面设置不同的旋转角度。最后，我们使用hover伪类选择器来实现鼠标悬停时的动画效果。

注意：该代码只能在支持CSS3的浏览器上运行，如Chrome、Safari等。在移动端设备上也可以使用该代码。