html旋转照片墙代码

颜谦熙 3个月前 41浏览 0评论

今天我来给大家分享一篇关于HTML旋转照片墙代码的文章。

首先我们需要了解一下HTML中的transform属性,这是一个用来对HTML元素进行变形的属性。而在transform属性中我们可以使用rotate()函数对元素进行旋转。

接下来我们来看一下代码:

  <div class="photos">
    <img src="photo1.jpg">
    <img src="photo2.jpg">
    <img src="photo3.jpg">
    <img src="photo4.jpg">
  </div>

  <style>
    .photos {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      width: 600px;
      position: relative;
      perspective: 1000px;
    }
    .photos img {
      width: 200px;
      height: 200px;
      position: absolute;
      transition: transform 1s;
      transform-origin: center;
    }
    .photos img:nth-of-type(1) {
      transform: rotateY(0deg) translateZ(280px);
    }
    .photos img:nth-of-type(2) {
      transform: rotateY(90deg) translateZ(280px);
    }
    .photos img:nth-of-type(3) {
      transform: rotateY(180deg) translateZ(280px);
    }
    .photos img:nth-of-type(4) {
      transform: rotateY(270deg) translateZ(280px);
    }
    .photos:hover img {
      transform: rotateY(360deg);
    }
  </style>

这段代码实现了一个旋转的照片墙。我们将四张图片作为HTML的子元素,并将它们定位到了正方形的四个顶点。添加了一个鼠标悬停事件,当鼠标悬停在容器上时,图片将沿着Y轴以360度的速度旋转。

在这段代码中,.photos类被设置为弹性盒子(Flexbox),并且通过“justify-content”和“align-items”旋转容器以使其水平居中。我们还使用transform属性为容器添加透视,使其具有三维效果。

每张图片都使用“position: absolute”定位到容器的每个角落,并使用“transform: translateZ()”将其位置移至容器的中心。我们接着使用“transform: rotateY() ”函数分别将其以不同的度数沿Y轴旋转。

最后,在:hover伪类下使用了 “transform: rotateY(360deg);”来启动旋转效果。

以上是我为大家介绍的HTML旋转照片墙代码,希望对大家有所帮助。

下一篇 python3 调用