如何不使用Flex通过CSS调整图片顺序并实现X/Y轴3D旋转？

1. Reordering Images Without Flex Layout #

The order property only works in Flexbox or CSS Grid containers. Since you want items stacked vertically (not in a single row), CSS Grid is the ideal—it lets you reorder items while keeping them in separate rows. Here's how to adjust your code:

Step 1: Convert the <ul> to a Grid Container #

Update your ul styles to use Grid, ensuring each list item takes a full row:

ul {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(4, auto); /* Creates 4 rows, each fitting the content height */
  /* Optional: Add gap if you want space between images */
  gap: 1rem;
}

Step 2: Assign Grid Rows to Reorder Items #

Instead of order, use grid-row to place each <li> in your desired sequence (1-3-4-2):

#1 { grid-row: 1; } /* First position */
#3 { grid-row: 2; } /* Second position */
#4 { grid-row: 3; } /* Third position */
#2 { grid-row: 4; } /* Fourth position */

Alternative: No Grid? Use Relative Positioning (Less Flexible)

If you can’t use Grid, you can adjust positions with position: relative and top, but this requires knowing the fixed height of each image (not dynamic):

li {
  float: left;
  width: 100%;
  position: relative;
  /* Replace 300px with your actual image height */
  height: 300px;
}

#3 { top: -300px; } /* Moves up one row */
#4 { top: -600px; } /* Moves up two rows */
#2 { top: 300px; }  /* Moves down three rows */

⚠️ Note: This breaks if image heights change, so Grid is the more robust choice.

2. 3D Rotation Around X/Y Axes #

To get a true 3D rotation effect, you need two key components: perspective on the parent container (to create depth) and using rotateX()/rotateY() in your transform. Here’s how to implement it:

Step 1: Add Perspective to the Parent #

Perspective creates the illusion of depth. Add it to your <ul>:

ul {
  /* Existing grid/position styles */
  perspective: 1000px; /* Adjust this value to control depth—higher = more subtle effect */
}

Step 2: Modify Your Animation for 3D Rotation #

Update your image animation to include rotateX() and rotateY() instead of just rotateZ(). For example:

img {
  opacity: 0;
  /* Preserve 3D space for child elements (optional but recommended) */
  transform-style: preserve-3d;
  animation: 3dRotate 6s infinite ease-in-out;
}

@keyframes 3dRotate {
  0% {
    opacity: 1;
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(360deg) rotateY(180deg);
  }
}

• Adjust angles and animation duration to fit your needs.
• rotateX() tilts the image forward/backward; rotateY() turns it left/right.

Why Your Original order Didn’t Work #

The order property is only supported in Flexbox and CSS Grid layouts. Since your original <ul> wasn’t a Flex/Grid container, the order values had no effect. Grid solves this without forcing items into a single row.

内容的提问来源于stack exchange，提问作者Taghreed