CSS 3D重影是指在CSS 3D模型中出現的一種效果，每個元素會在其后面投下一個重影，呈現出一種立體感。這種效果使得CSS 3D看起來更加真實，而且在一些情況下也可以增加某些元素的可讀性。本文將講解如何在CSS 3D中實現這種效果。 首先我們需要理解3D坐標系，它包含了x、y、z三個軸。X軸水平向右，Y軸垂直向下，Z軸垂直向內。當我們在頁面中定義一個元素，我們可以使用transform屬性來轉換這個元素的位置、尺寸和角度。 為了實現3D重影，我們可以使用兩個元素。一個元素用于顯示正常的內容，另一個元素用于創建重影。為了使重影顯示在元素后面，我們可以使用`z-index`屬性將其放在更低的圖層上。在這個元素上，我們可以通過`transform`屬性中的`rotateX`或`rotateY`來創建一個繞X或Y軸旋轉的動畫。 下面我們看一個例子： ```html``` ```css .wrapper { perspective: 1000px; } .card { width: 300px; height: 200px; position: relative; transform-style: preserve-3d; } .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform-origin: 50% 50%; transform: rotateX(0deg) translateZ(25px); } .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transform-origin: 50% 50%; transform: rotateX(90deg) translateZ(-25px); opacity: 0.3; z-index: -1; } ``` 在這個例子中，`.wrapper`用于設置3D投影的效果。`.card`是包含正常內容和重影的容器，它也用于定義這個元素在3D空間中的位置。`.content`用于顯示正常的內容，而`.shadow`則用于顯示重影。我們使用`transform-style:preserve-3d`來告訴瀏覽器這個元素應該被當作3D模型來渲染。我們還使用`transform-origin`來指定旋轉時的本地原點。 在`.content`和`.shadow`兩個元素中，我們使用了`translateZ`屬性來指定在Z軸上的位置，這就是在3D空間中的深度值。在`.content`中，我們使用了`rotateX`屬性來繞X軸旋轉，而在`.shadow`中，我們使用了`rotateX`和`scaleY`屬性來旋轉和縮放這個元素，以創建重影的效果。 最后，在`.shadow`上我們使用了`z-index`屬性來將其置于更低的圖層上。 總的來說，CSS 3D重影可以增強元素的3D感，使得頁面更加真實。雖然它相對容易實現，但需要我們對3D坐標系以及CSS 3D轉換屬性有一定的了解。