小程序动画3D旋转

wxml文件

<view class="container">

  <view class="wrap">

    <view class="cube">

      <view class="front"><image src="../images/jiaban.png"></image></view>

      <view class="back"><image src="../images/jiaban.png"></image></view>

      <view class="top"><image src="../images/jiaban.png"></image></view>

      <view class="bottom"><image src="../images/jiaban.png"></image></view>

      <view class="left"><image src="../images/jiaban.png"></image></view>

      <view class="right"><image src="../images/jiaban.png"></image></view>

    </view>

  </view>

  <view class="qidai">敬请期待~</view>

</view>

wxss文件

/**index.wxss**/

.container {

  width: 100%;

  background: #fff;

}

.wrap {

  margin-top: 100rpx;

  perspective: 800px;

  perspective-origin: 50% 100px;

}

.cube {

  position: relative;

  width: 200px;

  transform-style: preserve-3d;

}

.cube view {

  position: absolute;

  width: 200px;

  height: 200px;

}

image {

  width: 200px;

  height: 200px;

}

.back {

  transform: translateZ(-100px) rotateY(180deg);

}

.right {

  transform: rotateY(-270deg) translateX(100px);

  transform-origin: top right;

}

.left {

  transform: rotateY(270deg) translateX(-100px);

  transform-origin: center left;

}

.top {

  transform: rotateX(-90deg) translateY(-100px);

  transform-origin: top center;

}

.bottom {

  transform: rotateX(90deg) translateY(100px);

  transform-origin: bottom center;

}

.front {

  transform: translateZ(100px);

}

@keyframes spin {

  from {

    transform: rotateY(0);

  }

  to {

    transform: rotateY(360deg);

  }

}

.cube {

  animation: spin 5s infinite linear;

}

.qidai {

  margin-top: 500rpx;

  font-size: 40rpx;

  font-family: Source Han Sans CN;

  font-weight: 400;

  color: #000000;

  opacity: 0.8;

}