CSS裸眼三D圖片

.box{
position: relative;
width: 200px;
height: 200px;
perspective: 500px;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 1s;
}
.box:hover span{
transform: rotateX(90deg);
}
.front{
background-color: #ff0000;
}
.back{
background-color: #00ff00;
transform: rotateX(180deg);
}

我們可以通過使用CSS的transform屬性和preserve-3d值來實現簡單的裸眼三維效果。將需要實現效果的元素設置為絕對定位，并設置為perspective屬性，這樣我們就能看到3D效果了。在元素內部我們再添加子元素，并將它們設置為transform-style屬性為preserve-3d。這樣，我們就能沿著3D空間進行移動、旋轉和縮放。在這個例子中，我們給box添加一個hover事件，當鼠標懸停在元素上時，它會進行旋轉，而front和back分別是背面和正面的樣式，通過旋轉來切換顯示。這樣我們就完成了一個簡單的CSS裸眼三維效果。