CSS圖片3D排放是一種獨特的效果，可以讓網站頁面看起來更加生動，逼真。下面我們來學習如何使用CSS將圖片進行3D排放。

/* 首先，設置圖片排列的容器 */
.container {
perspective: 800px;  /* 為容器設置透視距離 */
}
/* 排列的圖片 */
img {
width: 300px; 
height: 200px;
position: absolute;  /* 相對定位 */
transform-style: preserve-3d;  /* 設置圖片3D保留屬性 */
transition: transform 1s;  /* 觸發屬性變換時使用的過渡時間 */
}
/* 圖片的不同排列方式 */
img:nth-child(1) {
top: 0;
left: 0;
transform-origin: center top 0;  /* 設定圖片的變換起點 */
transform: rotateX( 90deg );  /* 旋轉X軸90度 */
}
img:nth-child(2) {
top: 0;
left: 400px;
transform-origin: center top 0;
transform: rotateY( 90deg );  /* 旋轉Y軸90度 */
}
img:nth-child(3) {
top: 250px;
left: 100px;
transform-origin: center center -100px;  /* 設定圖片的變換起點并向內旋轉100px */
}
img:nth-child(4) {
top: 250px;
left: 400px;
transform-origin: center center 100px; /* 設定圖片的變換起點并向外旋轉100px */
transform: rotateY( 180deg );  /* 旋轉Y軸180度 */
}

通過以上CSS代碼，我們可以實現圖片的不同排列方式。其中，perspective屬性是必須的，它是用來設定透視距離的，不同的透視距離可以實現不同的3D效果。同時，transform-style屬性也是必須的，它是用來保留元素的3D轉換屬性，使得它的子元素也可以繼承這個特性。

在實現時，如果需要設置圖片的變換起點，可以通過transform-origin屬性來實現。其余的屬性，如transform、transition等也很重要，它們可以幫助我們實現動畫效果，讓頁面看起來更加生動。

總的來說，CSS圖片3D排放是一種非常有趣的效果，可以讓頁面看起來更加立體，具有更好的視覺效果。同時，在實現時需要注意以上屬性的設置，特別是透視距離的設置，這樣才能實現更加逼真的3D效果。