写一个立体相册html代码
时间: 2023-03-08 12:15:36 浏览: 103
这是一个实现立体相册的html代码:
<div class="container">
<div class="photo-album">
<div class="album-item">
<img src="1.jpg" />
</div>
<div class="album-item">
<img src="2.jpg" />
</div>
<div class="album-item">
<img src="3.jpg" />
</div>
<div class="album-item">
<img src="4.jpg" />
</div>
</div>
</div><style>
.container {
perspective: 1000px;
width: 100%;
height: 600px;
position: relative;
}
.photo-album {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
transform-style: preserve-3d;
}
.album-item {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
transform-style: preserve-3d;
}
.album-item:hover {
opacity: 1;
transform: rotateY(360deg);
}
</style>