html旋转3D照片墙代码
时间: 2024-05-26 08:09:02 浏览: 31
HTML 旋转 3D 照片墙可以通过 CSS3 的 transform 和 transition 属性实现。下面是一个简单的示例代码:
```html
<div class="photo-wall">
<div class="photo-item">
<img src="photo1.jpg" alt="photo1">
</div>
<div class="photo-item">
<img src="photo2.jpg" alt="photo2">
</div>
<div class="photo-item">
<img src="photo3.jpg" alt="photo3">
</div>
<!-- 其他照片项 -->
</div>
```
```css
.photo-wall {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
perspective: 1000px;
}
.photo-item {
position: absolute;
width: 200px;
height: 150px;
top: 75px;
left: 100px;
transition: transform .5s ease-out;
}
.photo-item:hover {
transform: rotateY(180deg);
}
.photo-item img {
width: 100%;
height: 100%;
}
```
上面的代码中,`.photo-wall` 是照片墙容器,设置了透视距离。`.photo-item` 是每张照片的容器,设置了宽、高和初始位置,并设置了鼠标悬停时的旋转效果。`.photo-item img` 是照片的图片,设置了宽、高等样式。
相关问题:
1. 如何在 HTML 中插入图片?
2. CSS3 的 transform 和 transition 属性如何使用?
3. 什么是透视距离?
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)