运用过渡transition属性，变形transform属性制作3D变形方块的效果。当鼠标移上图像1时，div将沿着X轴逆时针旋转90度

好的，可以使用以下代码实现该效果：

<div class="box">
  <img src="image1.jpg">
</div>

.box {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 800px; /* 设置透视距离 */
}
.box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotateX(0deg); /* 初始状态为不旋转 */
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}
.box:hover img {
  transform: rotateX(-90deg); /* 鼠标移上时沿X轴逆时针旋转90度 */
}

以上代码中，通过设置perspective属性来设置透视距离，使得元素呈现出3D效果。然后通过设置初始状态的rotateX为0度，表示元素不旋转。在鼠标移上时，通过设置rotateX为-90度，表示元素沿着X轴逆时针旋转90度。最后通过transition属性添加过渡效果，使得变形更加平滑自然。