<!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. shell 通过EOF在脚本中输入需要的用户名或密码

    参考地址:https://www.cnblogs.com/liyuanhong/p/10390786.html expect使用参考:https://www.cnblogs.com/liyuanhon ...

  2. jenkins持续集成原理

    转载: 原文地址:http://www.2cto.com/kf/201609/544550.html 持续集成 开发中,我们经常遇到一些奇怪问题,比如本地可以编译成功的代码但是同事们更新代码后编译出错 ...

  3. idea中的一些快捷键，未完待续......

    1.快速查看注释的渲染效果 在keymap中查找“Quick Documentation”并设置自己喜欢的快捷键即可 2.全局搜索 在keymap中查找“Replace in Path”并设置自己喜欢 ...

  4. Ubuntu16下Hive 安装

    0.安装环境和版本 Ubuntu16,hadoop版本是2.7.2 ,选择Hive版本为  hive-2.1.17 1. Hive安装包下载 地址: https://mirrors.tuna.tsin ...

  5. beanPostProcessor与beanFactoryPostProcessor

    BeanFactoryPostProcessor的典型应用:PropertyPlaceholderConfigurer BeanFactoryPostProcessor会在所有的bean配置载入之后执 ...

  6. phpstorm快捷键大全

    前言:这段时间换了编辑器,所以挺多命令也改变了 转载来自:https://www.jianshu.com/p/ffb24d61000d?utm_campaign=maleskine&utm_c ...

  7. 第十三节：实际开发中使用最多的监视锁Monitor、lock语法糖的扩展、混合锁的使用(ManualResetEvent、SemaphoreSlim、ReaderWriterLockSlim)

    一. 监视锁(Monitor和lock) 1. Monitor类,限定线程个数的一把锁,两个核心方法: Enter:锁住某个资源. Exit:退出某一个资源. 测试案例:开启5个线程同时对一个变量进行 ...

  8. .NET面试题系列（十六）数据库面试题

    数据库事务的四大特性 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚.因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则不能对数据库有任何影响. ...

  9. 更改 Ubuntu默认Python版本的问题

    一般Ubuntu默认版本为2.x,之前运行一些程序,将默认版本修改为3.5,现在想修改为2.7. 之前的方法有些忘记,现在重新记录一下: 1.查看你系统中有哪些Python的二进制文件可供使用, ls ...

  10. Django组件-分页器

    Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views here ...