完成如下特效，当鼠标移动到任一张图片，该图片方向转为正向，且置于最上层。

你需要使用CSS的transform属性来实现图片方向转为正向，并使用z-index属性来将当前图片置于最上层。同时，你需要使用JavaScript来监听鼠标移动事件，并在事件发生时应用这些CSS样式。

以下是示例代码：

HTML部分：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" class="image">
  <img src="image2.jpg" alt="Image 2" class="image">
  <img src="image3.jpg" alt="Image 3" class="image">
</div>

CSS部分：

.image-container {
  display: flex;
  justify-content: center;
}

.image {
  width: 200px;
  height: 200px;
  margin: 0 10px;
  transition: transform 0.3s, z-index 0.3s;
}

.image:hover {
  transform: rotateY(180deg);
  z-index: 1;
}

JavaScript部分：

const images = document.querySelectorAll('.image');
images.forEach(image => {
  image.addEventListener('mousemove', () => {
    image.classList.add('image-hover');
  });

  image.addEventListener('mouseleave', () => {
    image.classList.remove('image-hover');
  });
});

解释一下代码：

首先，我们使用CSS将所有图片放置在一个容器中，并设置它们的样式。在这个样式中，我们定义了图片的宽度、高度和边距，并设置了一个过渡效果，以在鼠标移动到图片上时平滑地旋转并置于最上层。

接下来，我们定义了一个:hover伪类，它将在鼠标移动到图片上时应用。在这个样式中，我们使用transform: rotateY(180deg)将图片沿Y轴旋转180度，使其面向观众，并使用z-index: 1将其置于最上层。

最后，我们使用JavaScript监听每个图片的mousemove和mouseleave事件，并在事件发生时应用或删除image-hover类。这个类将在鼠标移动到图片上时添加，以应用:hover样式，并在鼠标离开时删除，以恢复原始样式。