微信小程序实现基于CSS 3D转换的旋转立方体效果（图片展示）

最新推荐文章于 2024-05-21 16:51:06 发布

不爱学习小趴菜

最新推荐文章于 2024-05-21 16:51:06 发布

阅读量452

点赞数 7

文章标签：微信小程序 css 3d

本文链接：https://blog.csdn.net/qq_38405436/article/details/136293164

版权

简单记录一下吧！！！

wxml:

<view class="memoirs-container">
  <view class="img">
    <image src="{{memories2[0].filePath}}"  style="width: 100%; height: 100%;"></image>        
  </view>
  <view class="img">
    <image src="{{memories2[1].filePath}}"  style="width: 100%; height: 100%"></image> 
  </view>
  <view class="img">
    <image src="{{memories2[2].filePath}}"  style="width: 100%; height: 100%"></image> 
  </view>
  <view class="img">
    <image src="{{memories2[3].filePath}}" style="width: 100%; height: 100%" ></image> 
  </view>
  <view class="img">
    <image src="{{memories2[4].filePath}}"  style="width: 100%; height: 100%"></image> 
  </view>
  <view class="img">
    <image src="{{memories2[5].filePath}}"  style="width: 100%; height: 100%"></image> 
  </view>
</view>

wxss:

.memoirs-container {
  width: 300rpx;
  height: 169rpx;
  animation: rotate 12s linear infinite;
  transform-style: preserve-3d;
  position: relative;
  margin: auto;
}

.img {
  width: 320rpx;
  height: 220rpx;
  margin-top: 180rpx;
  position: absolute;
  border-radius: 10rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.img:nth-of-type(1) {
  transform: rotateY(0deg) translateZ(300rpx) scale(1); /* 添加缩放效果 */
}

.img:nth-of-type(2){
  transform: rotateY(60deg) translateZ(300rpx) scale(1);
}

.img:nth-of-type(3){
  transform: rotateY(120deg) translateZ(300rpx) scale(1);
}

.img:nth-of-type(4){
  transform: rotateY(180deg) translateZ(300rpx) scale(1);
}

.img:nth-of-type(5){
  transform: rotateY(240deg) translateZ(300rpx) scale(1);
}

.img:nth-of-type(6){
  transform: rotateY(300deg) translateZ(300rpx) scale(1);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}