用CSS3设计照片墙

最新推荐文章于 2023-06-28 16:25:54 发布

m0_47191887

最新推荐文章于 2023-06-28 16:25:54 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/m0_47191887/article/details/112155237

版权

这篇博客介绍了如何利用CSS3设计一个可以旋转的3D照片墙。通过叠放图片，设置3D空间，调整角度和间距，再配合关键帧动画，实现照片墙的动态效果。代码展示详细说明了每个步骤，适合初学者实践。

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

照片墙

首先来看看效果
在这里插入图片描述
这个墙可以环绕起来并转动
首先清楚一下思路
第一步：可以将这八张照片叠起来
第二步：用CSS3设置3d空间
第三步：分别将这八张图片在3d空间里沿着父级的Y轴分别旋转45，90,135度…（因为360度里分八份）。
第四步：做到这一步会发现，这八张图虽然已经转开，但是还没有彼此产生间距，这个时候用transform属性的translateZ属性将每个图里父级的距离移开，就会形成这个照片墙。
第五步：给父级设置关键帧动画，就可以将整个照片墙旋转起来。
就下来进行代码展示：
第一步：先写一个父级和八个子级

 <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
        <div class="son5"></div>
        <div class="son6"></div>
        <div class="son7"></div>
        <div class="son8"></div>
    </div>

第二步：设置3d层

   *{
   
            margin: 0;
            padding: 0;
        }
       body{
   
           perspective: 2700px;
           height: 100%;
           width: 100%;
           perspective-origin: 0px -296px;      
       }

这里的perspective属性是设置3d视距
perspective-origin属性是设置3d眼球
这里是将整个页面变为3d空间‘

接下来设置父级和父级里的子级

 .father{
   
           width: 200px;
           height: 200px;
           transform-style: preserve-3d; 
           margin: 200px auto;
           animation: rum 8s linear infinite;        
       }
       .father div{
   
           width: 200px;
           height:</

最低0.47元/天解锁文章