CSS3提供了強(qiáng)大的3D變形和動(dòng)畫效果，讓網(wǎng)頁(yè)的呈現(xiàn)更加生動(dòng)和立體。下面是一段示例代碼，展示如何使用CSS3制作3D圖片效果：

/* 容器樣式 */
.container {
perspective: 1000px; /* 視距，越小離屏幕越近，單位px */
}
/* 圖片樣式 */
.image {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /* 保持3D，旋轉(zhuǎn)后不會(huì)扁平化 */
transform: rotateY(45deg) translateZ(100px); /* 旋轉(zhuǎn)角度和距離，單位px */
transition: transform 1s; /* 過渡效果，1秒內(nèi)完成 */
}
/* 鼠標(biāo)懸停時(shí)的樣式 */
.image:hover {
transform: rotateX(90deg); /* 旋轉(zhuǎn)到90度，注意YZ軸未變 */
}
/* 圖片正面樣式 */
.image .front {
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
transform-origin: center center -100px; /* 旋轉(zhuǎn)中心，即Z軸距離 */
}
/* 圖片背面樣式 */
.image .back {
position: absolute;
width: 100%;
height: 100%;
background-color: #0f0;
transform-origin: center center 100px; /* 旋轉(zhuǎn)中心，即Z軸距離 */
transform: rotateY(180deg); /* 背面翻轉(zhuǎn) */
}

以上代碼定義了一個(gè)容器和一張圖片，采用透視效果使其呈現(xiàn)出立體效果。通過鼠標(biāo)懸停時(shí)的過渡效果，將圖片旋轉(zhuǎn)到90度，從而呈現(xiàn)出完整的背面。通過前后兩個(gè)面的絕對(duì)定位，實(shí)現(xiàn)了正反兩面的背景色設(shè)置和Z軸的距離轉(zhuǎn)換。