css3 图片堆叠切换 |css中怎么垂直居中div

HTML结构：
<div class="stacked-images">
<img src="image1.jpg" alt="" class="image1">
<img src="image2.jpg" alt="" class="image2">
<img src="image3.jpg" alt="" class="image3">
<img src="image4.jpg" alt="" class="image4">
</div>
CSS样式：
.stacked-images {
width: 500px;
height: 500px;
position: relative;
perspective: 1000px;
}
.stacked-images img {
position: absolute;
top: 0;
left: 0;
transform-origin: 0% 0%;
transition: transform 1s;
}
.stacked-images img.image1 {
transform: rotateY(0deg) translateZ(0px);
}
.stacked-images img.image2 {
transform: rotateY(-90deg) translateZ(50px);
}
.stacked-images img.image3 {
transform: rotateY(-180deg) translateZ(100px);
}
.stacked-images img.image4 {
transform: rotateY(-270deg) translateZ(50px);
}
.stacked-images:hover img:nth-child(1) {
transform: rotateY(180deg) translateZ(0px);
}
.stacked-images:hover img:nth-child(2) {
transform: rotateY(90deg) translateZ(50px);
}
.stacked-images:hover img:nth-child(3) {
transform: rotateY(0deg) translateZ(100px);
}
.stacked-images:hover img:nth-child(4) {
transform: rotateY(-90deg) translateZ(50px);
}

在HTML结构中，大家使用了一个div元素包裹了四张图片。在CSS样式中，大家设置了一个.stacked-images类，将其作为整个图片堆叠切换的父级元素。其中perspective属性是用来设置模拟出立体效果的，它决定了3D元素如何呈现出来。transform-origin属性用来设置图像翻转的基准点。transition属性是指定切换效果，这里用的是transform 1s，表示在1秒内完成切换。

在设置了图片的基本样式之后，大家需要设置鼠标悬浮时的效果，利用:hover选择器实现。在悬浮时，每一张图片都会执行3D翻转的效果，并且根据它们在HTML结构中的位置进行旋转切换。这样一个有趣的CSS3 图片堆叠切换效果就完成了。