浅写一个3D旋转相册

看到有些人好奇用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;
    }

相关阅读:
QT操作SQLite数据库_界面方式_增删改查
瑞吉外卖项目1 + 源码
【vscode+clangd】clangd不起作用的解决方案、compile_commands.json文件为空的解决方案
java计算机毕业设计ssm+vue酒店VIP客户管理系统
【华为OD机试真题 JAVA】根据某条件聚类最少交换次数
标准IDOC同步物料
书生浦语训练营第2期-第4节笔记
Linux中的服务管理
一个关于React与Node.js前后端分离项目部署问题
springboot多模块下swaggar界面出现异常（Knife4j文档请求异常）或者界面不报错但是没有显示任何信息

原文地址：https://blog.csdn.net/BambooStrip/article/details/126772010