代码如下：
 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>3D立体照片墙</title>

    <style>

        /*

           transform顺序:先写rotate再写tanslate

            图片相差角度不一样，两个之间的距离也不一样

        */

        *{

            margin: 0;

            padding: 0;

        }

        .picwall{

            margin: 100px 300px;

            transform-style: preserve-3d;/**/

            transform-origin: 140px 200px;

            animation: pics 10s linear infinite;

        }

        .d0{

            width: 280px;

            height: 400px;

            position: absolute;

            float: left;

        }

        .pic11{

            transform: rotateY(60deg) translateZ(260px);

        }

        .pic12{

            transform: rotateY(120deg) translateZ(260px);

        }

        .pic21{

            transform: rotateY(180deg) translateZ(260px);

        }

        .pic22{

            transform: rotateY(240deg) translateZ(260px);

        }

        .pic31{

            transform: rotateY(300deg) translateZ(260px);

        }

        .pic32{

            transform: rotateY(360deg) translateZ(260px);

        }

        @keyframes pics {

            0%{

                transform: rotateY(0deg) ;

            /*rotate(0deg)*/

            }

            100%{

                transform: rotateY(360deg) ;

            /*rotate(360deg)*/

            }

        }

    </style>

</head>

<body>

    <div class="picwall">

            <img  class="pic11  d0" src="../imgs/xch1.jpg" alt=""/>

            <img  class="pic12  d0" src="../imgs/xch2.jpg" alt=""/>

            <img  class="pic21 d0" src="../imgs/xch3.jpg" alt=""/>

            <img  class="pic22 d0" src="../imgs/xch4.jpg" alt=""/>

            <img  class="pic31 d0" src="../imgs/xch5.jpg" alt=""/>

            <img  class="pic32 d0" src="../imgs/xch6.jpg" alt=""/>

    </div>

</body>

</html>
 

3D立体照片墙的更多相关文章

  1. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  2. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  3. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  4. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  5. Unity3D实现3D立体游戏原理及过程

    Unity3D实现3D立体游戏原理及过程 183 0 0     下面的教程是我今天整理的资料,教大家一步步完成自己的3D立体游戏,并向大家介绍一些3D成像的原理.     理论上,每个普通的非立体3 ...

  6. NVIDIA® Quadro® 四路缓冲 3D立体方案

    http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...

  7. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  8. CorelDRAW X8制作金属质感3D立体按钮

    本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...

  9. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

随机推荐

  1. XPath 实例

    在本节,让我们通过实例来学习一些基础的 XPath 语法. XML实例文档 我们将在下面的例子中使用这个 XML 文档: "books.xml" : <?xml versio ...

  2. git安装及命令使用和github网站

    最近参与别人的github项目时,学习了git的使用,首先需要在https://github.com/网站上注册账号和邮箱,然后fork一个开源项目,然后下载目前Windows下最新版本的git,下载 ...

  3. Android中使用Handler造成内存泄露的分析和解决

    什么是内存泄露?Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用所指向 ...

  4. 夺命雷公狗-----React_native---4---初始化项目

    我们首先在android目录下创建一个apps的文件夹: 然后我们在apps目录下,按住shift键加鼠标右键选择--在此打开命令窗口输入命令初始化项目 然后就是等了................. ...

  5. Centos搭建Python+Nginx+Tornado+Mysql环境[转载]

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入 ...

  6. java 使用 集合 制作学生管理系统

    以上是文件组织结构 下面是个.java的具体代码: package com.collection.students.pojo; public class Student { private Strin ...

  7. Weblogic的安装与配置

    安装准备  下载WebLogic10.2 for x86 linux安装文件: 安装RHEL 5.4: 检查Linux环境,确保安装目录所在的文件系统空闲空间在2G以上.如果空间不足,则应扩展root ...

  8. JS表单验证

    1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符 ...

  9. linq+映射数据库调用方法

      关于这一块.我在网上了解了很多.但是都没有找到自己想要的.通过各方面了解在linq 中调用映射的数据库函数以及存储过程方法如下. 1.传递对象参数//*注意:参数必须和你函数或者存储过程的参数一样 ...

  10. [转载] SQL获取所有数据库名、表名、储存过程以及参数列表

    查询一个数据库中所有表字段属性的sql语句       1.获取所有用户名: SELECT name FROM Sysusers where status='2' and islogin='1' is ...