js+css做一个左右切换立体式图片
时间: 2023-08-08 10:07:18 浏览: 54
可以使用 CSS 3D transform 实现一个左右切换立体式图片效果。以下是一个简单的示例代码:
HTML:
```html
<div class="container">
<div class="image-wrapper">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
</div>
```
CSS:
```css
.container {
width: 500px;
height: 300px;
perspective: 1000px; /* 透视距离 */
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d; /* 保持子元素的 3D 变换 */
transition: transform 0.5s; /* 动画过渡效果 */
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面 */
}
.image-wrapper img:last-child {
transform: rotateY(180deg); /* 第二张图片旋转 180 度 */
}
.container:hover .image-wrapper {
transform: rotateY(-180deg); /* 鼠标悬停时旋转 180 度 */
}
```
解释说明:
- 父元素 `.container` 设置 `perspective` 属性,用于设置透视距离,产生 3D 效果。
- 图片容器 `.image-wrapper` 设置 `transform-style` 属性,用于保持子元素的 3D 变换。同时设置 `transition` 属性,用于指定动画过渡效果。
- 图片容器中每张图片设置 `backface-visibility` 属性,用于隐藏背面。
- 第二张图片使用 `transform: rotateY(180deg)` 旋转 180 度,使其呈现背面。
- 当鼠标悬停在容器上时,通过改变 `.image-wrapper` 的 `transform` 属性值,实现图片的旋转效果。
可以通过修改 `.container` 的宽高、图片数量和 `backface-visibility` 属性等进行调整和优化。