<!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. git添加删除远程tag

    git tag -a test20190108_1 -m "fix bug" git push origin test20190108_1 git push origin :ref ...

  2. Entity Framework入门教程（1)---Entity Framework简介

    什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...

  3. 队列优化的dijkstra

    #include<iostream> #include<queue> #include<cstdio> #include<cstring> #inclu ...

  4. n对n

    创建一对一的关系:OneToOne("要绑定关系的表名") 创建一对多的关系:ForeignKey("要绑定关系的表名") 创建多对多的关系:ManyToMan ...

  5. [物理学与PDEs]第5章习题5 超弹性材料中客观性假设的贮能函数表达

    设超弹性材料的贮能函数 $\hat W$ 满足 (4. 19) 式, 证明由它决定的 Cauchy 应力张量 ${\bf T}$ 满足各向同性假设 (4. 7) 式. 证明: 若贮能函数 $W$ 满足 ...

  6. C++创建对象的三种方法

    我自己以前经常弄混 A a(1); 栈内存中分配 A b = A(1); 栈内存中分配,和第一种无本质区别 A c = new A(1); 堆内存中分配 前两种在函数体执行完毕之后会被释放,第三种需要 ...

  7. spring Bean的完整生命周期

    spring 容器中的bean的完整生命周期一共分为十一步完成. 1.bean对象的实例化 2.封装属性,也就是设置properties中的属性值 3.如果bean实现了BeanNameAware,则 ...

  8. nginx禁止ip登录，只允许域名访问

    公司要求,线上solr.kibana要求只能通过域名进行访问,禁止用ip+端口进行登录访问,那么,下面介绍下我是如何实现的 1.禁止ip,允许域名访问 如下图,默认安装好nginx,不让ip方式访问, ...

  9. 《java与模式》

    2012年3月 随笔档案 - java_my_life - 博客园--此网友 12年的博客都是和模式有关的,希望可以多看看.http://www.cnblogs.com/java-my-life/ar ...

  10. spring cloud 注册中心--eureka注册与发现

    本文详细介绍spring cloud微服务的默认注册中心--eureka注册与发现.开发环境需要Windows系统.jdk和intellij idea.与zookeeper注册中心相比,eureka不 ...