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

这个问题涉及到前端开发的知识，需要通过 JavaScript 和 CSS 来实现。可以通过以下步骤实现：

1. 给图片添加鼠标移入事件，使用 JavaScript 获取到该图片元素。
2. 使用 CSS 将该图片的 z-index 设置为最大，使其置于最上层。
3. 使用 CSS transform 将该图片旋转180度，使其方向转为正向。

以下是一个简单的实现示例：

HTML 代码：

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

CSS 代码：

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  transform: rotateY(180deg);
  transition: transform 0.3s ease-in-out;
}

.image-container img:hover {
  z-index: 999;
  transform: rotateY(0deg);
}

JavaScript 代码：

const images = document.querySelectorAll('.image-container img');

images.forEach(image => {
  image.addEventListener('mouseover', event => {
    event.target.classList.add('hover');
  });

  image.addEventListener('mouseout', event => {
    event.target.classList.remove('hover');
  });
});

这段代码首先获取到所有图片元素，然后为每个图片元素添加鼠标移入和移出事件。在移入事件中，图片元素添加一个 hover 类，用于触发 CSS 中的:hover 伪类，将 z-index 设置为最大，将图片方向旋转180度。在移出事件中，移除 hover 类，恢复图片原来的样式。