当前位置：首页 > uni-app

uniapp 3D旋转

2026-02-06 17:47:56uni-app

实现3D旋转的基本方法

在UniApp中实现3D旋转效果，可以通过CSS3的transform属性结合rotateX、rotateY、rotateZ等函数来实现。以下是一个简单的示例代码：

<template>
  <view class="container">
    <view class="box" :style="{ transform: transformStyle }"></view>
    <button @click="rotateX">X轴旋转</button>
    <button @click="rotateY">Y轴旋转</button>
    <button @click="rotateZ">Z轴旋转</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      angleX: 0,
      angleY: 0,
      angleZ: 0
    }
  },
  computed: {
    transformStyle() {
      return `rotateX(${this.angleX}deg) rotateY(${this.angleY}deg) rotateZ(${this.angleZ}deg)`
    }
  },
  methods: {
    rotateX() {
      this.angleX += 30
    },
    rotateY() {
      this.angleY += 30
    },
    rotateZ() {
      this.angleZ += 30
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #007AFF;
  margin-bottom: 20px;
  transition: transform 0.5s ease;
}
</style>

使用CSS关键帧动画实现连续旋转

要实现连续的3D旋转动画，可以使用CSS的@keyframes规则：

<template>
  <view class="container">
    <view class="rotating-box"></view>
  </view>
</template>

<style>
.rotating-box {
  width: 200px;
  height: 200px;
  background-color: #34C759;
  margin: 100px auto;
  animation: rotate3d 5s infinite linear;
  transform-style: preserve-3d;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
</style>

结合3D变换实现更复杂效果

要实现更复杂的3D效果，可以结合perspective和transform-style属性：

<template>
  <view class="scene">
    <view class="cube" :style="{ transform: cubeTransform }">
      <view class="face front">Front</view>
      <view class="face back">Back</view>
      <view class="face right">Right</view>
      <view class="face left">Left</view>
      <view class="face top">Top</view>
      <view class="face bottom">Bottom</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rotateX: 0,
      rotateY: 0
    }
  },
  computed: {
    cubeTransform() {
      return `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
    }
  },
  mounted() {
    setInterval(() => {
      this.rotateY += 1
      this.rotateX += 0.5
    }, 50)
  }
}
</script>

<style>
.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin: 100px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  opacity: 0.8;
}

.front {
  background: red;
  transform: translateZ(100px);
}
.back {
  background: blue;
  transform: translateZ(-100px);
}
.right {
  background: green;
  transform: rotateY(90deg) translateZ(100px);
}
.left {
  background: yellow;
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  background: purple;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background: orange;
  transform: rotateX(-90deg) translateZ(100px);
}
</style>

使用WebGL实现高级3D效果

对于更高级的3D效果，可以考虑使用Three.js等WebGL库：

安装Three.js库：
```
npm install three
```

在UniApp中使用：


<template>
<view>
 <canvas canvas-id="webgl" style="width: 100%; height: 100vh;"></canvas>
</view>
</template>

import * as THREE from 'three';

export default { onReady() { const canvas = uni.createSelectorQuery().select('#webgl'); canvas.node((res) => { const width = res.width; const height = res.height;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ canvas: res });

  renderer.setSize(width, height);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  animate();
}).exec();

} }

```