教我制作3D照片表白HTML代码
时间: 2023-06-26 10:05:00 浏览: 41
好的,以下是制作3D照片表白的HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D照片表白</title>
<style>
/* 容器设置 */
.container {
position: relative;
perspective: 1000px margin: 20px;
}
/* 照片设置 */
.photo {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
transition: transform 0.5s;
transform-style: preserve-3d;
}
/* 照片的前面 */
.front {
transform: rotateY(0deg);
}
/* 照片的背面 */
.back {
transform: rotateY(180deg);
}
/* 鼠标悬停时,翻转照片 */
.container:hover .front {
transform: rotateY(-180deg);
}
/* 鼠标悬停时,翻转照片 */
.container:hover .back {
transform: rotateY(0deg);
}
/* 文字设置 */
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
text-shadow: 0px 0px 10px black;
text-align: center;
}
/* 背景设置 */
body {
background: url(背景图片的链接) no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 照片 -->
<div class="photo front" style="background-image:url(正面图片的链接);"></div>
<div class="photo back" style="background-image:url(背面图片的链接);"></div>
<!-- 文字 -->
<div class="text">输入你想说的话</div>
</div>
</body>
</html>
```
将代码中的 `背景图片的链接`、`正面图片的链接`、`背面图片的链接` 和 `输入你想说的话` 按需替换即可。