以下是三个常见的基于
CSS实现的照片3D
旋转效果：
1. 翻转
效果
```html
<
div class="flip-container">
<
div class="flipper">
<
div class="front">
<img src="image.jpg" alt="Front">
</
div>
<
div class="back">
<img src="image.jpg" alt="Back">
</
div>
</
div>
</
div>
```
```
css
/* 全局样式 */
.flip-container {
perspective: 1000px;
}
/* 翻转容器 */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* 翻转正面 */
.front {
z-index: 2;
}
/* 翻转背面 */
.back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* 鼠标悬浮时翻转 */
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
```
2. 立体
旋转效果
```html
<
div class="cube">
<
div class="side front">
<img src="image.jpg" alt="Front">
</
div>
<
div class="side right">
<img src="image.jpg" alt="Right">
</
div>
<
div class="side back">
<img src="image.jpg" alt="Back">
</
div>
<
div class="side left">
<img src="image.jpg" alt="Left">
</
div>
<
div class="side top">
<img src="image.jpg" alt="Top">
</
div>
<
div class="side bottom">
<img src="image.jpg" alt="Bottom">
</
div>
</
div>
```
```
css
/* 全局样式 */
.cube {
transform-style: preserve-3d;
transform: perspective(1000px);
width: 200px;
height: 200px;
margin: 50px auto;
transition: transform 1s;
}
/* 六个面 */
.side {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.front {
transform: translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/* 鼠标悬浮时
旋转 */
.cube:hover {
transform: rotateY(360deg);
}
```
3. 环绕
旋转效果
```html
<
div class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</
div>
```
```
css
/* 全局样式 */
.carousel {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 300px;
margin: 50px auto;
perspective: 1500px;
}
/* 照片 */
.carousel img {
max-width: 150px;
max-height: 150px;
margin: 0 30px;
transform-style: preserve-3d;
transition: transform 0.5s;
}
/* 鼠标悬浮时
旋转 */
.carousel:hover img {
transform: rotateY(360deg);
}
/* 设置每张照片的
旋转角度 */
.carousel img:nth-child(1) {
transform: rotateY(0deg) translateZ(200px);
}
.carousel img:nth-child(2) {
transform: rotateY(60deg) translateZ(200px);
}
.carousel img:nth-child(3) {
transform: rotateY(120deg) translateZ(200px);
}
.carousel img:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);
}
.carousel img:nth-child(5) {
transform: rotateY(240deg) translateZ(200px);
}
```
以上三种方式都可以
实现照片3D
旋转效果，具体选择哪一种取决于你的需求和喜好。
最低0.47元/天 解锁文章
1831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
