<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .box{
    width: 500px;
    height: 300px;
    margin: 100px auto 0;
    overflow: hidden;
   }
   .box img{
    float: left;
   }
   #and{
    perspective:600;
    transform-style: preserve-3d;
    /*动画名称 动画时间  速度曲线(liner,ease,ease-in.ease-out,ease-in-out) 动画前延迟 动画播放次数(n|infinite) */
    animation: animation-x 7s linear 0s infinite;
   }
   .i3d,.l3d{
    transform-style: preserve-3d;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
   }
   @keyframes animation-x{
    0%{transform: rotateX(0deg);}
    50%{transform: rotateX(180deg);}
    100%{transform: rotateX(360deg);}
   }
   #animate1{
    animation: animation-y 5s linear 0s infinite;
   }
   #animate3{
    animation: animation-y 3s linear 0s infinite;
   }
   @keyframes animation-y{
    0%{transform: rotateY(0deg);}
    50%{transform: rotateY(180deg);}
    100%{transform: rotateY(360deg);}
   }
   #animate2{
    animation: animation-second 4s linear 0s infinite;
   }
   @keyframes animation-second{
    0%{transform: rotateY(360deg);}
    50%{transform: rrotateY(180deg);}
    100%{transform: rotateY(0deg);}
   }
  </style>
 </head>
 <body>
  <div id="and" class="box">
   <div id="animate1" class="l3d">
         <img class="i3d" src="data:image/ps1.jpg" />
         <img class="i3d" src="data:image/ps2.jpg" />
         <img class="i3d" src="data:image/ps3.jpg" />
         <img class="i3d" src="data:image/ps4.jpg" />
         <img class="i3d" src="data:image/ps5.jpg" />
      </div>
      <div id="animate2" class="l3d">         
          <img class="i3d" src="data:image/ps6.jpg" />
          <img class="i3d" src="data:image/ps7.jpg" />
          <img class="i3d" src="data:image/ps8.jpg" />
          <img class="i3d" src="data:image/ps9.jpg" />
          <img class="i3d" src="data:image/ps10.jpg" />
      </div>
      <div id="animate3" class="l3d">     
          <img class="i3d" src="data:image/ps11.jpg" />
          <img class="i3d" src="data:image/ps12.jpg" />
          <img class="i3d" src="data:image/ps13.jpg" />
          <img class="i3d" src="data:image/ps14.jpg" />
          <img class="i3d" src="data:image/ps15.jpg" />
      </div>
  </div>
 </body>
</html>

简单的3d变换的更多相关文章

  1. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  2. [OpenGL ES 03]3D变换：模型，视图，投影与Viewport

    [OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...

  3. WPF 3D 小小小小引擎 - ·WPF 3D变换应用

    原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...

  4. WPF中的3D变换PlaneProjection

    在UWP中有一个比较好用的伪3D变换PlaneProjection,可以以一种轻量级和非常简单的方式实现3D的效果.这种效果在Silverlight中也有这种变换,但在WPF中确一直没有提供. 虽然W ...

  5. Windows UWP开发系列 – 3D变换

    在Win8.1中,引入了一个PlaneProjection可以实现3D变换,但它的变换方式比较简单,只能实现基本的旋转操作.在Windows 10 UWP中,引入了一个更加强大的3D变换Transfo ...

  6. 基本3D变换之World Transform, View Transform and Projection Transform

    作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...

  7. WPF 3D变换应用

    WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开发效率高,而且也容易上手. 下面给大家演示的是使用在WPF 3 ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

    3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform- ...

  9. CSS3之3d变换与关键帧

    3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...

随机推荐

  1. 映像文件工具srec

    目录 映像文件工具srec 介绍与帮助 常用例子 常用选项 一个实际的例子 hex转bin 数据填充 文件合并 文件分割 加入CRC 查看信息 使用命令集合的文本 详细文件格式的描述 附录:MDK的例 ...

  2. java.util.ConcurrentModificationException异常原因及解决方法

    在java语言中,ArrayList是一个很常用的类,在编程中经常要对ArrayList进行删除操作,在使用remove方法对ArrayList进行删除操作时,报java.util.Concurren ...

  3. 关于学习Linux的基本命令操作

    常用的Linux 命令 scp root/1.txt root@127.0.0.1:/home rpm  安装软件 systemctl start service 启动服务 systemctl res ...

  4. C#控件数组批量生成控件

    在编写C#窗体应用程序的时候,有时候需要生成好多个功能相似的同一种控件(比如数字键盘按键.单选框等),这时候使用窗体编辑器,费时费力,不便于修改.因此可以采用批量生成控件的形式. 以批量生成按钮为例 ...

  5. Linux负载查询定位工具

    1 uptime命令,负载查询命令 02:34:03 // 当前时间up 2 days, 20:14 // 系统运行时间1 user // 正在登录用户数 而最后三个数字呢,依次则是过去 1 分钟.5 ...

  6. 集合各个实现类的底层实现原理 ----- 原文地址：https://blog.csdn.net/qq_25868207/article/details/55259978

    ArrayList实现原理要点概括 参考文献: http://zhangshixi.iteye.com/blog/674856l https://www.cnblogs.com/leesf456/p/ ...

  7. windows的git的安装和配置

    下载并安装git(安装过程中采用默认选项) 进入gitbash(gitbash集成了windows和linux的命令) 使用git --version查看是否安装成功: 用vim .gitconfig ...

  8. Error:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'

    Information:Gradle tasks [:app:assembleDebug]Error:Execution failed for task ':app:transformResource ...

  9. SQL Server - JOIN

    JOIN

  10. 肺结节CT影像特征提取（四）——肺结节CT影像特征提取MATLAB代码实现

    之前的文章讲述了肺结节CT影像数据特征提取算法及基于MATLAB GUI设计的肺结节CT影像特征提取系统.本文将讲述几个主要部分的代码实现,分别是预处理.灰度特征提取.纹理特征提取.形态特征提取数据. ...