css3 心形照片墙 |字母超出换行 css

.heart { 
width: 80vw; 
margin: 0 auto; 
}
.heart ul { 
list-style: none; 
margin: 0; 
padding: 0; 
display: flex; 
flex-wrap: wrap; 
justify-content: center;
}
.heart li { 
position: relative; 
margin: 10px; 
width: 200px; 
height: 200px; 
cursor: pointer; 
transition: all .3s; 
transform-style: preserve-3d; 
}
.heart li:hover { 
transform: rotateY(180deg); 
}
.heart li img { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
object-fit: cover; 
}
.heart li::before, .heart li::after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
backface-visibility: hidden; 
transition: all .3s; 
}
.heart li::before { 
transform: rotateY(0deg) translateZ(-100px); 
background-image: linear-gradient(to bottom left, #ee1d52, #fc5c7d 60%, #ffbaab); 
}
.heart li::after { 
transform: rotateY(90deg) translateZ(-100px); 
background-image: linear-gradient(to bottom left, #ee1d52, #fc5c7d 60%, #ffbaab); 
}

以上代码是实现心形照片墙的关键样式，其中，.heart为整个照片墙的容器，.heart ul为照片的列表，.heart li为每个照片的容器，.heart li:hover为鼠标悬浮时的效果。

在HTML中，大家只需要按照以下格式编写代码：

<div class="heart">
<ul>
<li><img src="图片地址"></li>
<li><img src="图片地址"></li>
<li><img src="图片地址"></li>
...
</ul>
</div>

这样，大家就成功地实现了一个令人惊叹的心形照片墙效果！