html表白完整代码照片墙
时间: 2023-09-26 18:13:28 浏览: 45
以下是一个HTML表白完整代码照片墙的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML表白代码照片墙</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image {
width: 200px;
height: 200px;
margin: 10px;
perspective: 1000px;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.image:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="image/1.jpg">
</div>
<div class="image">
<img src="image/2.jpg">
</div>
<div class="image">
<img src="image/3.jpg">
</div>
<div class="image">
<img src="image/4.jpg">
</div>
<div class="image">
<img src="image/5.jpg">
</div>
<div class="image">
<img src="image/6.jpg">
</div>
<div class="image">
<img src="image/7.jpg">
</div>
<div class="image">
<img src="image/8.jpg">
</div>
<div class="image">
<img src="image/9.jpg">
</div>
<div class="image">
<img src="image/10.jpg">
</div>
<div class="image">
<img src="image/11.jpg">
</div>
<div class="image">
<img src="image/12.jpg">
</div>
</div>
</body>
</html>
```
请注意,上述代码中的照片素材需要放在一个名为"image"的文件夹中,并按照顺序命名为1.jpg、2.jpg、3.jpg等等。你可以根据需要修改代码中的图片文件名和数量,以适应你自己的照片墙。