• 浅写一个3D旋转相册

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

    这里说说一种方法.

    首先看一下效果

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

    第一步写出主体

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

    1. <body>
    2.   <div>
    3.     <section>section>
    4.     <section>section>
    5.     <section>section>
    6.     <section>section>
    7.     <section>section>
    8.     <section>section>
    9.   div>
    10. body>

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

    1.   body {
    2.       perspective: 1000px;
    3.     }
    4.  
    5.     div {
    6.       position: relative;
    7.       width: 400px;
    8.       height: 400px;
    9.       margin: 300px auto;
    10.       transform-style: preserve-3d;
    11.     }

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

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

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

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

    1. section:nth-child(1) {
    2.       transform: translateZ(450px);
    3.     }
    4.  
    5.     section:nth-child(2) {
    6.       transform: rotateY(60deg) translateZ(450px);
    7.     }
    8.  
    9.     section:nth-child(3) {
    10.       transform: rotateY(120deg) translateZ(450px);
    11.     }
    12.  
    13.     section:nth-child(4) {
    14.       transform: rotateY(180deg) translateZ(450px);
    15.     }
    16.  
    17.     section:nth-child(5) {
    18.       transform: rotateY(240deg) translateZ(450px);
    19.     }
    20.  
    21.     section:nth-child(6) {
    22.       transform: rotateY(300deg) translateZ(450px);
    23.     }

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

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

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

    1.     @keyframes move {
    2.       100% {
    3.         transform: rotateY(360deg);
    4.       }
    5.     }

    然后给需要移动的div加上

    animation: move 30s linear infinite ;

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

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

    1.     div:hover {
    2.       animation-play-state:paused;
    3.     }

  • 相关阅读:
    [Ubuntu]ssh: unrecognized service
    设计模式 人类父母和猫孩子的关系理解观察者模式（发布订阅模式）
    网络基础(一)
    计划评审技术
    yearrecord——一个类似痕迹墙的React数据展示组件
    Chisel 入门（2）运算符
    Creating Higher-level Constructs with ZooKeeper: A Comprehensive Guide
    flask 实践
    springboot建筑造价师资格考试应试网站设计与实现毕业设计源码260839
    Transformer模型架构笔记
  • 原文地址：https://blog.csdn.net/BambooStrip/article/details/126772010