示例代码



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>3d相册展示</title>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }

        html,

        body {

            height: 100%;

            width: 100%;

            background-color: silver;

        }

        .my-container {

            width: 100%;

            height: 200px;

            margin: 0px auto;

            margin-top: 200px;

            /*border-radius: 20px;*/

            /*background-color: firebrick;*/

        }

        .my-container .photo {

            /*border-radius: 20px;*/

            height: 100%;

            width: 100%;

            perspective: 1200px;

            perspective-origin: 613px -800px;

            animation: shijiao 3s linear infinite alternate 4s;

        }

        @keyframes shijiao {

            from {

                perspective: 1200px;

                perspective-origin: 613px -800px;

            }

            to {

                perspective: 1200px;

                perspective-origin: 613px 300px;

            }

        }

        .my-container .photo .container {

            height: 100%;

            width: 100px;

            transform-style: preserve-3d;

            position: relative;

            margin: 0px auto;

            /*border-radius: 20px;*/

            animation: xuanzhuan 5s linear 4s infinite;

        }

        @keyframes xuanzhuan {

            from {

                transform: rotateY(0deg);

            }

            to {

                transform: rotateY(-360deg);

            }

        }

        .my-container .photo .container .img {

            height: 200px;

            width: 100px;

            /*background-color: darkgoldenrod;*/

            position: absolute;

            border-radius: 20px;

            background-color: transparent;

            /*border: 3px solid white;*/

            box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);

        }

        img {

            height: 180px;

            width: 90px;

            display: block;

            margin: 10px 5px;

        }

        .img1 {

            /*background-color: red;*/

            transform: translateZ(0px);

            animation: zhuan1 4s linear forwards;

        }

        @keyframes zhuan1 {

            14.28% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            28.56% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

            42.84% {

                transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);

            }

            57.12% {

                transform: translateX(0px) translateZ(-300px) rotateY(-180deg);

            }

            71.40% {

                transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);

            }

            85.68% {

                transform: translateX(300px) translateZ(0px) rotateY(-270deg);

            }

            100% {

                transform: translateX(212.1px) translateZ(212.1px) rotateY(-315deg);

            }

        }

        .img2 {

            /*background-color: black;*/

            transform: translateZ(-10px);

            animation: zhuan2 3.5s linear .5s forwards;

        }

        @keyframes zhuan2 {

            16.6% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            33.2% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

            49.8% {

                transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);

            }

            66.4% {

                transform: translateX(0px) translateZ(-300px) rotateY(-180deg);

            }

            83% {

                transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);

            }

            100% {

                transform: translateX(300px) translateZ(0px) rotateY(-270deg);

            }

        }

        .img3 {

            /*background-color: khaki;*/

            transform: translateZ(-20px);

            animation: zhuan3 3s linear 1s forwards;

        }

        @keyframes zhuan3 {

            20% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            40% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

            60% {

                transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);

            }

            80% {

                transform: translateX(0px) translateZ(-300px) rotateY(-180deg);

            }

            100% {

                transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);

            }

        }

        .img4 {

            /*background-color: violet;*/

            transform: translateZ(-30px);

            animation: zhuan4 2.5s linear 1.5s forwards;

        }

        @keyframes zhuan4 {

            25% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            50% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

            75% {

                transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);

            }

            100% {

                transform: translateX(0px) translateZ(-300px) rotateY(-180deg);

            }

        }

        .img5 {

            /*background-color: aqua;*/

            transform: translateZ(-40px);

            animation: zhuan5 2s linear 2s forwards;

        }

        @keyframes zhuan5 {

            33.3% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            66.6% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

            100% {

                transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);

            }

        }

        .img6 {

            /*background-color: saddlebrown;*/

            transform: translateZ(-50px);

            animation: zhuan6 1.5s linear 2.5s forwards;

        }

        @keyframes zhuan6 {

            50% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

            100% {

                transform: translateX(-300px) translateZ(0px) rotateY(-90deg);

            }

        }

        .img7 {

            /*background-color: darkblue;*/

            transform: translateZ(-60px);

            animation: zhuan7 1s linear 3s forwards;

        }

        @keyframes zhuan7 {

            100% {

                transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);

            }

        }

        .img8 {

            /*background-color: hotpink;*/

            transform: translateZ(-70px);

            animation: zhuan8 .5s linear 3.5s forwards;

        }

        @keyframes zhuan8 {

            100% {

                transform: translateZ(300px);

            }

        }

    </style>

</head>

<body>

<div class="my-container">

    <div class="photo">

        <div class="container">

            <div class="img img1">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/1.jpg"/>

            </div>

            <div class="img img2">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/2.jpg"/>

            </div>

            <div class="img img3">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/3.jpg"/>

            </div>

            <div class="img img4">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/4.jpg"/>

            </div>

            <div class="img img5">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/5.jpg"/>

            </div>

            <div class="img img6">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/6.jpg"/>

            </div>

            <div class="img img7">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/7.jpg"/>

            </div>

            <div class="img img8">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/8.jpg"/>

            </div>

            <div class="img img9">

                <img src="https://cdn.jsdelivr.net/gh/latinos-bub/img-obs/blog-content/3D相册示例/9.jpg"/>

            </div>

        </div>

    </div>

</div>

</body>

</html>

最新文章

  1. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
  2. SSE指令集学习：Compiler Intrinsic
  3. ABAP 客户报表
  4. a标签的herf和click事件
  5. 161206、 Ionic、Angularjs、Cordova搭建Android开发环境
  6. Codeforces Round #133 (Div. 2)
  7. HDU-4747 Mex（线段树区间更新）
  8. *[topcoder]TheTree
  9. 查看当前正在被执行的sql
  10. Unity3D 导入贴图、模型等资源文件时自动设置参数
  11. android 55
  12. XML解析方式与解析工具
  13. ActiveReports 9实战教程（1）： 手把手搭建环境Visual Studio 2013 社区版
  14. Servlet、Filter、Listener、Interceptor基础
  15. CSS中常见中文字体的英文名称(Microsoft YaHei,SimHei)
  16. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
  17. 谈谈Python中的decorator装饰器，如何更优雅的重用代码
  18. 通过FileReader和FileWriter实现复制文件的方法。
  19. WCF系列教程之消息交换模式之请求与答复模式(Request/Reply)
  20. 【LeetCode】4. 寻找两个有序数组的中位数

热门文章

  1. Python List cmp()方法
  2. loj #6039 「雅礼集训 2017 Day5」珠宝 分组背包 决策单调性优化
  3. Spring学习总结(2)-自动装配
  4. Chrome自动格式化Json输出
  5. Spring Security学习笔记一
  6. 改改Python代码，运行速度还能提升6万倍
  7. JS 获取验证码按钮改变案例
  8. Alink漫谈(十七) ：Word2Vec源码分析 之 迭代训练
  9. vue中methods互相调用的方法
  10. CSS概述（二）