3d相册css3 |css trans 在ie8

/* 3D相册CSS3样式 */
.album-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.album-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s;
}
.album-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.album-item:hover {
transform: rotateY(30deg);
}
.album-item:hover + .album-item {
transform: translateX(100%) rotateY(-30deg);
}
.album-item:hover ~ .album-item {
transform: translateX(200%) rotateY(60deg);
}

以上是一个基础的3D相册CSS3样式，它将一个包含多张照片的相册容器分成多个项目，每个项目都是一个包含一张图片的容器。通过设置transform-style属性为preserve-3d，可以使得每个项目都拥有独立的3D空间，实现立体效果。

当鼠标放在某个项目上时，它会旋转30度，同时它下一个项目也会移动到屏幕右侧并旋转-30度，其他项目也按照此规律进行移动和旋转，最终呈现出一个非常炫酷的3D相册效果。