如何实现支持灵活尺寸、可嵌入图片的带深度感坐标轴？

Great question! The cube approach is a solid start for 3D axes, and fixing the flexible sizing issue just needs a few tweaks to use relative units and CSS variables instead of hardcoded pixels. Here's a step-by-step solution that supports variable dimensions and image embedding:

• Use CSS Variables for Dynamic Sizing: Define variables for width, height, and depth so you can easily adjust the axes' proportions without rewriting all transform values.
• Replace Fixed Pixels with Relative Units: Use percentages or viewport units to make the container and axes responsive to parent elements or the viewport.
• Turn Cube Faces into Image Containers: Modify the cube sides to accept background images or <img> tags, ensuring the 3D perspective doesn't break image scaling.
• Simplify to Only Needed Faces: Since you don't need a full cube, keep just the three faces that represent your core axes planes (XY, XZ, YZ).

Working Example Code #

CSS #

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #eee;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Define CSS variables for easy dimension adjustments */
:root {
  --axis-width: 80%; /* Responsive width relative to parent */
  --axis-height: 60%;
  --axis-depth: 150px; /* Fixed depth, or use vw for full responsiveness */
  --perspective: 1000px;
}

.container {
  width: 90vw;
  height: 80vh;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: var(--perspective);
  perspective-origin: top right; /* Adjust to change viewing angle */
}

.axes {
  position: relative;
  width: var(--axis-width);
  height: var(--axis-height);
  transform-style: preserve-3d;
  /* Optional: Add slight rotation for better depth visibility */
  transform: rotateX(15deg) rotateY(-15deg);
}

.axis-plane {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  border: 2px solid white;
  overflow: hidden; /* Prevent images from spilling outside the plane */
}

/* XY Plane (Front) */
.xy-plane {
  background-color: rgba(213, 0, 0, 0.7);
  transform: translateZ(calc(var(--axis-depth) / 2));
}

/* XZ Plane (Left) */
.xz-plane {
  background-color: rgba(48, 79, 254, 0.7);
  transform: rotateY(-90deg) translateZ(calc(var(--axis-width) / 2));
  width: var(--axis-depth); /* Match the axes' depth */
}

/* YZ Plane (Top) */
.yz-plane {
  background-color: rgba(0, 191, 165, 0.7);
  transform: rotateX(90deg) translateZ(calc(var(--axis-height) / 2));
  height: var(--axis-depth); /* Match the axes' depth */
}

/* Image styling for planes */
.axis-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain image aspect ratio without distortion */
  opacity: 0.9;
}

HTML #

<div class="container">
  <div class="axes">
    <!-- XY Plane with Image -->
    <div class="axis-plane xy-plane">
      <img src="your-xy-image.jpg" alt="XY Plane Visualization">
    </div>
    <!-- XZ Plane with Image -->
    <div class="axis-plane xz-plane">
      <img src="your-xz-image.jpg" alt="XZ Plane Visualization">
    </div>
    <!-- YZ Plane with Image -->
    <div class="axis-plane yz-plane">
      <img src="your-yz-image.jpg" alt="YZ Plane Visualization">
    </div>
  </div>
</div>

Key Features Explained #

• Dynamic Sizing: The :root variables let you tweak --axis-width, --axis-height, and --axis-depth to fit any layout. For full responsiveness, change --axis-depth to 20vw instead of a fixed pixel value.
• Image Embedding: Each plane uses an <img> tag with object-fit: cover to ensure images scale correctly without distortion. You can also use background-image on the plane divs if you prefer.
• Simplified Axes: We've kept only the three planes needed for a 3D axis system, removing unnecessary cube faces.
• Adjustable Perspective: Modify --perspective and perspective-origin in the .container class to change how "deep" the axes look and the viewing angle.

If you want to add axis lines (like tick marks or labels), you can overlay absolutely positioned <div>s or SVG elements on each plane—just make sure they're inside the .axis-plane containers so they inherit the 3D transform.

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