16个实用的CSS样式之3D照片墙

最新推荐文章于 2025-05-03 11:06:50 发布

AI_boom

最新推荐文章于 2025-05-03 11:06:50 发布

阅读量1.6k

点赞数

文章标签： css 3d 前端

本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/127017225

版权

本文针对初学者，介绍了如何使用CSS设计3D照片墙，包括布局设计、样式美化、方向设置和动画创建的详细步骤。通过设置3D空间属性、旋转角度和动画，实现了六个区块形成正方体的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是3D照片墙

来看一下最终效果吧！！！

2.布局设计

布局设计很简单，因为就是6个区块，废话少说直接看代码：

HTML <main> 元素呈现了文档的 body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <!-- <link rel="stylesheet" href="style.css" /> -->
     <title>3D照片墙</title>
   </head>
   <body>
     <main>
       <div class="cube">
         <div class="img1">1</div>
         <div class="img2">2</div>
         <div class="img3">3</div>
         <div class="img4">4</div>
         <div class="img5">5</div>
         <div class="img6">6</div>
       </div>
     </main>
   </body>
 </html>

3.样式美化

属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它。

flat：设置元素的子元素位于该元素的平面中。
preserve-3d：指示元素的子元素应位于 3D 空间中。

利用这个属性我们就可以让6个区块实现层层遮挡的效果。

 .cube {
   width: 250px;
   height: 250px;
   transform-style: preserve-3d;
   transform-origin: 125px 125px 0;
   animation: rotate-cube 10s ease-in-out infinite;
 }
 
 .cube > div {
   width: 250px;
   height: 250px;
   background-size: cover;
   background-position: center center;
   opacity: 0.8;
   position: absolute;
   box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
 }

显而易见，这6个区块层叠在一起了。

4.方向设置

现在6个区块叠在一起我们要让他们各自旋转一定角度形成一个正方体。

前：x和y方向不需要变化，但是要沿z轴向外移动半个cube的大小，（我设置的cube时250px*250px）所以需要移动125px translateZ(125px);

后：后面的图片还要翻个面它才是朝外的，所以要沿y轴旋转180°，然后也是沿z轴向外移动125px，坐标系都是相对于图片自身为参考系，图片旋转了坐标系也会跟着转。

左：如果就固定这个坐标系不动，左边的图片应该先沿y轴逆时针旋转90°，再沿x轴负方向移动125px。但是事实是图片旋转的时候坐标系会跟着它也旋转，这和刚刚后面的图片的分析是一样的。

因此左边的图片应该是这样变化：它需要沿y轴逆时针旋转90°，（顺为正逆为负），然后需要注意的是旋转之后它的坐标系也会跟着旋转，所以它是再沿着它的z轴向外移动125px

其余3面就不做分析了，读者可自行理解分析。

 /* 前 */
 .cube .img1 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182055933.jpg");
   transform: rotateY(0deg) translateZ(125px);
 }
 
 /* 右 */
 .cube .img2 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182054678.jpg");
   transform: rotateY(90deg) translateZ(125px);
 }
 
 /* 左 */
 .cube .img3 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182054795.jpg");
   transform: rotateY(-90deg) translateZ(125px);
 }
 
 /* 下 */
 .cube .img4 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182055976.jpg");
   transform: rotateX(90deg) translateZ(125px);
 }
 
 /* 上 */
 .cube .img5 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182055933.jpg");
   transform: rotateX(-90deg) translateZ(125px);
 }
 
 /* 后 */
 .cube .img6 {
   background-image: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209182055933.jpg");
   transform: rotateY(180deg) translateZ(125px);
 }

5.创建动画

这时我们只是完成了cube的制作，静态的cube我们只能看到正面，所以我们要创建一个动画让他动起来。相信经过前面几个css样式的制作，你和我一样都掌握了基本的animation和动画帧keyframes的使用。故不再赘述，代码如下：

 @keyframes rotate-cube {
   0% {
     transform: rotateX(0deg) rotateY(0deg);
 }
   20% {
     /* 右边图片 */
     transform: rotateY(-90deg);
 }
   40% {
     /* 上 */
     transform: rotateX(-90deg);
 }
   60% {
     /* 左 */
     transform: rotateY(90deg);
 }
   80% {
     /* 下 */
     transform: rotateX(90deg);
 }
   100% {
     transform: rotateX(0deg) rotateY(0deg);
 }
 }