下面我就来详细讲解“JS实现3D图片旋转展示效果代码”的完整攻略。

1. 实现思路

实现3D图片旋转展示效果的基本思路是将多张图片设置为立方体的6个面，然后通过JS控制立方体进行旋转操作，从而创造出3D图片旋转展示的效果。

2. 具体实现步骤

2.1 HTML结构设计

HTML代码需要包含一个立方体的父容器和6张图片，每张图片必须是放在一个面。为了实现立体效果，并且保持图片面的大小一致，我们可以使用定位和transform控制图片的位置和大小。具体的HTML代码见下面的示例。

<div class="cube">
  <div class="cube-face cube-face-front"><img src="image1.jpg" alt=""></div>
  <div class="cube-face cube-face-back"><img src="image2.jpg" alt=""></div>
  <div class="cube-face cube-face-right"><img src="image3.jpg" alt=""></div>
  <div class="cube-face cube-face-left"><img src="image4.jpg" alt=""></div>
  <div class="cube-face cube-face-top"><img src="image5.jpg" alt=""></div>
  <div class="cube-face cube-face-bottom"><img src="image6.jpg" alt=""></div>
</div>

2.2 CSS样式设计

首先，我们需要设置立方体的父容器的基本样式和立方体6个面的基本样式。

.cube {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cube-face {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: rgba(0,0,0,0.4);
  border: 1px solid #fff;
}

接着，我们需要为每个面设置不同的旋转角度和位置，从而实现立体效果。

.cube-face-front {
  transform: rotateY(0deg) translateZ(200px);
}
.cube-face-back {
  transform: rotateY(180deg) translateZ(200px);
}
.cube-face-right {
  transform: rotateY(90deg) translateZ(200px);
}
.cube-face-left {
  transform: rotateY(-90deg) translateZ(200px);
}
.cube-face-top {
  transform: rotateX(90deg) translateZ(200px);
}
.cube-face-bottom {
  transform: rotateX(-90deg) translateZ(200px);
}

2.3 JS代码实现

接下来，我们需要使用JS来实现立方体的旋转效果。

首先，我们需要给立方体的父容器添加鼠标事件监听器。

var cube = document.querySelector('.cube');
cube.onmousedown = function (event) {
  ...
};

接着，在鼠标按下的时候，我们需要记录下当前鼠标的坐标和立方体的初始旋转角度。

var startX = event.clientX;
var startY = event.clientY;
var currentX = 0;
var currentY = 0;
var rotateX = 0;
var rotateY = 0;

接着，在鼠标移动时，我们需要计算出当前鼠标移动的距离，并根据距离计算出当前旋转的角度。

currentX = event.clientX - startX;
currentY = event.clientY - startY;
rotateY += currentX * 0.1;
rotateX -= currentY * 0.1;
cube.style.transform = 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';

最后，在鼠标松开的时候，我们需要将计算出的旋转角度归零。

currentX = 0;
currentY = 0;

3. 示例说明

下面以两个示例说明如何使用上述步骤实现3D图片旋转展示效果。

3.1 示例1

HTML代码：

<div class="cube">
  <div class="cube-face cube-face-front"><img src="image1.jpg" alt=""></div>
  <div class="cube-face cube-face-back"><img src="image2.jpg" alt=""></div>
  <div class="cube-face cube-face-right"><img src="image3.jpg" alt=""></div>
  <div class="cube-face cube-face-left"><img src="image4.jpg" alt=""></div>
  <div class="cube-face cube-face-top"><img src="image5.jpg" alt=""></div>
  <div class="cube-face cube-face-bottom"><img src="image6.jpg" alt=""></div>
</div>

CSS代码：

.cube {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cube-face {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: rgba(0,0,0,0.4);
  border: 1px solid #fff;
}
.cube-face-front {
  transform: rotateY(0deg) translateZ(200px);
}
.cube-face-back {
  transform: rotateY(180deg) translateZ(200px);
}
.cube-face-right {
  transform: rotateY(90deg) translateZ(200px);
}
.cube-face-left {
  transform: rotateY(-90deg) translateZ(200px);
}
.cube-face-top {
  transform: rotateX(90deg) translateZ(200px);
}
.cube-face-bottom {
  transform: rotateX(-90deg) translateZ(200px);
}

JS代码：

var cube = document.querySelector('.cube');
cube.onmousedown = function (event) {
  var startX = event.clientX;
  var startY = event.clientY;
  var currentX = 0;
  var currentY = 0;
  var rotateX = 0;
  var rotateY = 0;
  function onMouseMove(event) {
    currentX = event.clientX - startX;
    currentY = event.clientY - startY;
    rotateY += currentX * 0.1;
    rotateX -= currentY * 0.1;
    cube.style.transform = 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
  }
  function onMouseUp(event) {
    currentX = 0;
    currentY = 0;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
};

3.2 示例2