用HTML+CSS代码写一个3D旋转相册

I'm pig

已于 2022-09-16 19:08:02 修改

阅读量1.1k

点赞数 2

文章标签： css3 前端 css

于 2022-09-08 21:07:34 首次发布

本文链接：https://blog.csdn.net/BambooStrip/article/details/126772010

版权

看到有些人好奇用css怎么写出3D旋转相册的效果.

这里说说一种方法.

首先看一下效果

写出这样的效果可以使用css的transform3D的变换效果:

第一步写出主体

注意:因为演示都是使用同一张背景图来写的,所以没有插入图片.可以选择插入图片,或者插入各自的背景图

<body>
  <div>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
</body>

然后给开启3D,设置3D景深,因为小demo所以直接给body开启了景深.

  body {
      perspective: 1000px;
    }

    div {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 300px auto;
      transform-style: preserve-3d;
    }

然后给section设置背景图.与样式.

section {
      position: absolute;
      width: 400px;
      height: 300px;
      background-image: url(./2.png);
    }

设置好section的样式之后,就可以开始调整每个相片所在的位置了,因为图片的调整可能因为视角问题不方便观察.可以给其父元素div,设置transform: rotate(deg);旋转其位置,方便观察.

对于图片的调整可以在浏览器中运行,通过检查调整,然后复制粘贴到代码里.更加直观一些.

section:nth-child(1) {
      transform: translateZ(450px);
    }

    section:nth-child(2) {
      transform: rotateY(60deg) translateZ(450px);
    }

    section:nth-child(3) {
      transform: rotateY(120deg) translateZ(450px);
    }

    section:nth-child(4) {
      transform: rotateY(180deg) translateZ(450px);
    }

    section:nth-child(5) {
      transform: rotateY(240deg) translateZ(450px);
    }

    section:nth-child(6) {
      transform: rotateY(300deg) translateZ(450px);
    }

调整好之后页面并不会变动,只是静态.

这时候使用动画即可.设置关键帧:

注意:省略0%就是默认0是原始位置.

    @keyframes move {
      100% {
        transform: rotateY(360deg);
      }
    }

然后给需要移动的div加上

animation: move 30s linear infinite ;

就可以实现图像旋转的效果了.

如果需要实现鼠标移入图像停止旋转也很简单.只需要设置鼠标hover的时候动画暂停就可以了.

    div:hover {
      animation-play-state:paused;
    }

I'm pig

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用HTML+CSS代码写一个3D旋转相册

3D旋转相册CSS
复制链接

扫一扫