web前端3D旋转相册（附完整代码）

效果图

当鼠标移动到目标时，外层的图片会张开，外面的图片修改透明度为0.5达到想要的效果。

完整代码

HTML部分

这里用的是绝对路径，一般建议使用相对路径（..代表上一级，.代表当前文件夹）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<link rel="stylesheet" href="rotate.css">
<body><main><div class="big"><div class="img1_1"><img src="D:\云计算\相片\006lmXQBgy1hr8ld3qw2dj30j60j6dv0.jpg" alt=""></div><div class="img2_2"><img src="D:\云计算\相片\eac47466820f6050608fe4e6ed17d47e.jpg" alt=""></div><div class="img3_3"><img src="D:\云计算\相片\18ff5fc7140d2cda24094e1895aaad2dcc969416.jpg" alt=""></div><div class="img4_4"><img src="D:\云计算\相片\32b963d28bc88541372f554334d99211a2810d88.jpg" alt=""></div><div class="img5_5"><img src="D:\云计算\相片\decb0351db3ae71a08caa6af2c658c3393696999.jpg" alt=""></div><div class="img6_6"><img src="D:\云计算\相片\f80113f1efc30b125b31faddcb706696399c2d7b.jpg" alt=""></div><span class="img1"><img src="D:\云计算\相片\006lmXQBgy1hr8ld3qw2dj30j60j6dv0.jpg" alt=""></span><span class="img2"><img src="D:\云计算\相片\eac47466820f6050608fe4e6ed17d47e.jpg" alt=""></span><span class="img3"><img src="D:\云计算\相片\18ff5fc7140d2cda24094e1895aaad2dcc969416.jpg" alt=""></span><span class="img4"><img src="D:\云计算\相片\32b963d28bc88541372f554334d99211a2810d88.jpg" alt=""></span><span class="img5"><img src="D:\云计算\相片\decb0351db3ae71a08caa6af2c658c3393696999.jpg" alt=""></span><span class="img6"><img src="D:\云计算\相片\f80113f1efc30b125b31faddcb706696399c2d7b.jpg" alt=""></span></div></main>
</body>
</html>

css部分

*{box-sizing: border-box;
}
body{margin: 0;padding: 0;background-color: #2f3542;
}
.big span {position: absolute;width: 150px;height: 150px;margin-left: 108px;margin-top: 112px;
}.big div{position: absolute;width: 300px;height: 300px;
}
.big{z-index: 2;height: 350px;width: 350px;margin: 200px auto;transform-style: preserve-3d;animation: roll 9s infinite;
}.big div img{opacity: 0.5;width: 100%;height: 100%;
}
.big span img{width: 100%;height: 100%;
}/* 左右前后上下 */.img3{transform:translateX(-75px) rotateY(90deg);
}
.img4{transform:translateX(75px) rotateY(90deg);
}
.img1{transform: translateZ(75px);
}
.img2{transform:  translateZ(-75px);
}
.img5{transform:translateY(-75px) rotateX(90deg);
}
.img6{transform:translateY(75px) rotateX(90deg);
}.img3_3{transform:translateX(-150px) rotateY(90deg);
}
.img4_4{transform:translateX(150px) rotateY(90deg);
}
.img1_1{transform: translateZ(150px);
}
.img2_2{transform:  translateZ(-150px);
}
.img5_5{transform:translateY(-150px) rotateX(90deg);
}
.img6_6{transform:translateY(150px) rotateX(90deg);
}
@keyframes roll{from {transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
} 
.big:hover .img1_1{transform: translateZ(300px);
}
.big:hover .img2_2{transform: translateZ(-300px);
}
.big:hover .img3_3{transform:rotateY(90deg) translateZ(-300px);
}  
.big:hover .img4_4{transform:rotateY(-90deg) translateZ(-300px);
}
.big:hover .img5_5{transform:rotateX(90deg) translateZ(300px);
}
.big:hover .img6_6{transform:rotateX(-90deg) translateZ(300px);
}

部分代码介绍

在CSS中， translateZ 用于在3D空间中对元素进行变换。

1. 功能原理
- 它沿着Z轴（垂直于屏幕的轴）移动元素。当你使用 translateZ 时，会改变元素在3D空间中相对于观察者（用户视角）的深度位置。
- 语法为 translateZ(<length>) ，其中 <length> 通常是像素（px）等长度单位。正值会使元素向屏幕外（靠近观察者）移动，负值会使元素向屏幕内（远离观察者）移动。
2. 应用场景
- 创建3D效果：与 translateX 和 translateY 配合使用，可以将2D元素转换为3D元素，构建出如3D立方体、3D旋转等复杂的3D效果。例如，在构建一个3D立方体时，通过 translateZ 调整每个面在Z轴上的位置，来营造出立方体的立体感。
- 视觉层次：可以用来调整元素的视觉层次。比如，让一个重要的元素看起来像是悬浮在其他元素之上（通过 translateZ 正值），或者像是凹陷在背景之中（通过 translateZ 负值）。

在CSS中， animation 是一个缩写属性，用于设置动画相关的多个属性。它的完整语法如下：

animation: name duration timing - function delay iteration - count direction fill - mode play - state;

各部分取值如下：

name

- 用于指定要应用的动画名称，这个名称要与 @keyframes 规则定义的动画名称匹配。例如 animation - name: myAnimation; 中的 myAnimation 就是一个自定义的动画名称。

duration

- 表示动画完成一个周期所需的时间，单位是秒（s）或者毫秒（ms）。比如 animation - duration: 3s; 意味着动画持续3秒完成一个周期。

timing - function

- 定义动画的速度曲线，即动画在每个时间点的速度变化情况。常见取值如下：
- ease：默认值，动画开始和结束速度较慢，中间速度快，产生平滑的过渡效果。
- linear：动画以恒定的速度进行，从开始到结束速度不变。
- ease - in：动画开始速度慢，然后逐渐加快。
- ease - out：动画开始速度快，然后逐渐减慢。
- ease - in - out：结合了ease - in和ease - out的特点，动画开始和结束速度慢，中间速度快。
- 还有一些像 cubic - bezier() 这样的函数可以自定义速度曲线。

delay

- 用于设定动画开始之前的延迟时间，单位同样是秒（s）或者毫秒（ms）。例如 animation - delay: 1s; 表示动画会在1秒后开始。

iteration - count

- 指动画的播放次数。可以是具体的数字，如 animation - iteration - count: 3; 表示动画播放3次；也可以是 infinite ，代表动画无限循环播放。

direction

- 规定动画是否反向播放，主要取值有：
- normal：默认值，动画按正常顺序播放。
- reverse：动画反向播放。
- alternate：动画先正向播放，然后反向播放，如此反复。
- alternate - reverse：动画先反向播放，然后正向播放，如此反复。

fill - mode

- 用于定义在动画开始之前和结束之后，元素如何应用样式。常见取值如下：
- none：默认值，动画结束后元素回到初始状态。
- forwards：动画结束后，元素保持在动画结束时的状态。
- backwards：在动画延迟期间，元素应用动画第一帧的样式。
- both：结合了forwards和backwards的特点。

play - state

- 用来控制动画的播放状态，取值为：
- running：动画正常播放。
- paused：动画暂停播放。

在CSS中， transform - style 属性主要用于3D变换场景。

它有两个主要的值： flat 和 preserve - 3d 。

flat（默认值）

- 当设置为 flat 时，所有子元素都被视为在2D平面上进行变换，即使父元素应用了3D变换。这意味着子元素不会有3D空间的效果，就像它们只是在一个平面上被简单地放置和移动一样。

preserve - 3d

- 若设置为 preserve - 3d ，则允许父元素的子元素在3D空间中进行变换。这在构建3D场景时非常有用，例如3D立方体或其他复杂的3D物体。
- 例如，你想构建一个3D立方体，需要将父元素的 transform - style 设置为 preserve - 3d ，这样立方体的六个面（作为子元素）就可以在3D空间中进行定位和旋转等操作，从而呈现出3D的视觉效果。

在HTML（确切地说是CSS）中， box - sizing 是一个非常重要的属性。

它用于定义如何计算元素的总宽度和总高度。有两个主要的值：

content - box（默认值）

- 这种模式下，元素的宽度和高度（ width 和 height 属性）只计算内容部分。
- 例如，对于一个设置了 width: 100px 、 height: 100px 的 div 元素，这里的100px只是内容区域的宽度和高度。如果该元素有边框（ border ）和内边距（ padding ），这些会额外增加元素的实际尺寸。所以整个元素的实际宽度是内容宽度 + 左右边框宽度 + 左右内边距宽度，实际高度是内容高度 + 上下边框宽度 + 上下内边距宽度。

border - box

- 此模式下，元素的 width 和 height 属性计算的是内容、边框和内边距的总和。
- 例如，同样是 width: 100px 、 height: 100px 的 div 元素，这100px是包括了边框和内边距后的总宽度和总高度。不管边框和内边距怎么设置，内容区域的大小会自动调整，以适应给定的总宽度和总高度。

在CSS中，设置图片透明度主要有以下两种方式：

使用 opacity 属性

- 语法及效果： opacity 属性用于设置元素（包括图片）的透明度，取值范围是从 0 （完全透明）到 1 （完全不透明）。例如， opacity:0.5; 会使图片呈现半透明状态。
- 示例代码：

css
img {
opacity: 0.5;
}

- 对元素内部内容的影响：当为图片设置 opacity 属性后，图片及其内部所有内容（如可能存在的文本等）都会一起变透明。

使用 rgba() 颜色值

- 语法及效果：在设置图片背景或者对包含图片的元素背景进行设置时，可以使用 rgba() 颜色值。其中， rgba() 中的 a 代表透明度，取值范围是从 0 （完全透明）到 1 （完全不透明）。
- 示例代码：
假设图片是放在一个 div 元素中，想让这个 div 背景透明从而间接影响图片的视觉效果，可以这样设置：

css
div {
background - color: rgba(255,255,255,0.5);
/* 白色半透明背景 */
}

- 应用场景区别：如果只想让图片所在的背景透明，而不影响图片本身的清晰度和可见度，使用 rgba() 颜色值设置背景透明度是更好的选择；如果是想让图片整体包括其内容都变透明，就可以使用 opacity 属性。