<!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. Hadoop记录-metastore jmx配置

    参考:http://www.lixiuliang.cn/categories/%E5%A4%A7%E6%95%B0%E6%8D%AE/ 1.修改bin/hive文件 添加jvm启动参数: if [ $ ...

  2. [Android] Android 锁屏实现与总结 （三）

    上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...

  3. [物理学与PDEs]第1章习题7 载流线圈的磁场

    设一半径为 $R$ 的圆周电路上的电流强度为 $I$. 试计算在通过圆心垂直于圆周所在平面的直线上, 由该圆周电路产生的磁场的磁感强度. 解答: 由对称性知在该直线 $l$ 上, ${\bf B}$ ...

  4. 013_RomanToInteger

    #####solution1####faster#### def romanToInt(s): d={ 'I':1, 'V':5, 'X':10, 'L':50, 'C':100, 'D':500, ...

  5. PHP微信公众号JSAPI网页支付（下）

    上一篇PHP微信公众号JSAPI网页支付(上)中讲到了公众号平台的相关设置以及支付的大致流程. 这一篇重点讲支付后,异步接受回调通知,以及处理后同步通知微信服务器. 首先梳理下整个jsapi支付的流程 ...

  6. 过滤器实现 （cookie认证）

    cookie用来做身份认证,非常好用,只需要设置Authentication和Authorization就行了. 但是 ,如果cookie不能用了,怎么办?  不要紧,我们也可以用过滤器进行身份认证. ...

  7. Xpath初了解

    如下一段html: <html> <body> <form id="loginForm"> <input name="usern ...

  8. 51nod--1072 威佐夫游戏 （博弈论）

    题目: 1072 威佐夫游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同 ...

  9. 【原创】大数据基础之Spark（2）Spark on Yarn：container memory allocation容器内存分配

    spark 2.1.1 最近spark任务(spark on yarn)有一个报错 Diagnostics: Container [pid=5901,containerID=container_154 ...

  10. 【原创】大数据基础之Azkaban（1）简介、源代码解析

    Azkaban3.45 一 简介 1 官网 https://azkaban.github.io/ Azkaban was implemented at LinkedIn to solve the pr ...