代码如下：
 

<!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. 基础编程-java之股神

    买了一支股票,他知道从他买股票的那天开始,股票会有以下变化:第一天不变,以后涨一天,跌一天,涨两天,跌一天,涨三天,跌一天...依此类推. 为方便计算,假设每次涨和跌皆为1,股票初始单价也为1,请计算 ...

  2. FORM中需要反复选择LOV

    注意:1.字段长度问题 2.提示显示样式:第一条记录 3.那些不现实的返回项,或者是只读的返回项可以  将从列表中验证 改为 否    比如一个LOV 返回2个值 但是其实只用选择前一个就可以带出后一 ...

  3. setCapture只能作用于鼠标不可作用于键盘等其它事件

    处理的优点非常类似于流媒体的优点.分析能够立即开始,而不是等待所有的数据被处理.而且,由于应用程序只是在读取数据时检查数据,因此不需要将数据存储在内存中.这对于大型文档来说是个巨大的优点.事实上,应用 ...

  4. poj 2515 差分序列,排列组合

    大神博客链接 http://blog.csdn.net/kksleric/article/details/8021276 这道题的差分序列从没看过,公式题. 先构造从0到m的第p阶差分序列,算出0^p ...

  5. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  6. dev GridControl实现拖拽

    一.示例说明 以gridControl1和gridControl2为例,从gridControl1拖拽行到gridControl2中去. 二.属性设置 gridControl2.AllowDrop = ...

  7. 数据分析 - 斯特鲁普效应(Stroop effect)

    数据分析 - 斯特鲁普效应(Stroop effect) Reinhard得到了一份斯特鲁普效应试验的数据,我们来分析下,文字的颜色,是否会影响受试者的反应. 这里先看看什么是斯特鲁普效应: 斯特鲁普 ...

  8. ubuntu14.04设置静态ip

    1. 找到文件并作如下修改: sudo vim /etc/network/interfaces 修改如下部分: auto eth0 iface eth0 inet static address 192 ...

  9. php变量 写时改变 写时复制

    写时复制 $var = 1; $var2 = $var; #此时$var2 与 $var 指向同一个zval refcount = 2: $var = 2; # 此时$val 改变 所以 $var 与 ...

  10. 阐述ArrayList、Vector、LinkedList的存储性能和特性。

    答:ArrayList 和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快 ...