[分享]css做三d照片墙静态

CSS做三D照片墙可以让你的网站动态起来，增加用户的体验感。在这篇文章中，我们将学习如何使用CSS来制作一个静态的三D照片墙。 .wall { width: 100; height: 100vh; p...

CSS做三D照片墙可以让你的网站动态起来，增加用户的体验感。在这篇文章中，我们将学习如何使用CSS来制作一个静态的三D照片墙。

 .wall {
    width: 100%;
    height: 100vh;
    perspective: 1000px;
    position: relative;
  }
  
  .img-box {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(0deg);
    transform-origin: center center;
    transition: transform 1s;
  }
  
  .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .img-box:nth-child(odd) {
    transform: translate(-50%, -50%) rotateY(45deg);
  }
  
  .img-box:nth-child(even) {
    transform: translate(-50%, -50%) rotateY(-45deg);
  }
  
  .img-box:hover {
    transform: scale(1.2) translateY(-20px);
  } 

首先，我们创建一个元素并给它一个class名为“wall”，它占据整个网页并设置一个透视角度为1000px。接着，我们创建一个"class"名为"img-box"的元素来容纳网站上的照片，该元素设置一个初始的宽度和高度，并将它置于页面中央。我们还要给它设置一个旋转角度来创建3D视觉效果。我们使用CSS的nth-child（odd）和nth-child（even）属性来为每个图片容器分别设置旋转角度。最后，我们为鼠标悬停的效果加入一些CSS动画，使照片看起来更具活力。

最后，我们可以继续在网站上添加更多的照片到这个三D照片墙上，并让你的用户可以更好地享受他们浏览的过程。