用html和huilder做一个有四张图片3D悬停切换效果的
时间: 2024-02-19 11:00:13 浏览: 29
好的,以下是一个用 HTML 和 CSS 实现的四张图片 3D 悬停切换效果的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D悬停切换效果</title>
<style>
.container {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
perspective: 1000px;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card:hover {
transform: rotateY(180deg);
}
.card .front,
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .front {
background-image: url("https://via.placeholder.com/800x400/FFA07A/000000?text=Front1");
}
.card .back {
background-image: url("https://via.placeholder.com/800x400/98FB98/000000?text=Back1");
transform: rotateY(180deg);
}
.card:nth-child(2) .front {
background-image: url("https://via.placeholder.com/800x400/87CEFA/000000?text=Front2");
}
.card:nth-child(2) .back {
background-image: url("https://via.placeholder.com/800x400/F08080/000000?text=Back2");
transform: rotateY(180deg);
}
.card:nth-child(3) .front {
background-image: url("https://via.placeholder.com/800x400/9370DB/000000?text=Front3");
}
.card:nth-child(3) .back {
background-image: url("https://via.placeholder.com/800x400/FFD700/000000?text=Back3");
transform: rotateY(180deg);
}
.card:nth-child(4) .front {
background-image: url("https://via.placeholder.com/800x400/00FFFF/000000?text=Front4");
}
.card:nth-child(4) .back {
background-image: url("https://via.placeholder.com/800x400/DC143C/000000?text=Back4");
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>
```
这个示例代码中有一个名为 `.container` 的容器,它用于包含四个名为 `.card` 的元素。每个 `.card` 元素都包含两个子元素:`.front` 和 `.back`。`.front` 用于显示正面图片,`.back` 用于显示背面图片。当鼠标悬停在 `.card` 元素上时,它会通过 `transform` 属性旋转 180 度,显示 `.back` 元素,从而实现 3D 悬停切换效果。