1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #wrap{
  8.             -webkit-perspective:800;
  9.             -webkit-perspective-origin:50% 50%;
  10.             /*overflow: hidden;*/
  11.             margin-top: 60px;
  12.         }
  13.         #con{
  14.             -webkit-transform-style:preserve-3d;
  15.             margin: 0 auto;
  16.             position: relative;
  17.             width: 300px;
  18.             height: 300px;
  19.             -webkit-transform-origin:150px 150px -150px;
  20.         }
  21.         .page{
  22.             background-color: #000000;
  23.             color: white;
  24.             width: 260px;
  25.             height: 260px;
  26.             padding: 20px;
  27.             text-align: center;
  28.             line-height: 300px;
  29.             font-size: 50px;
  30.             opacity: 0.5;
  31.         }
  32.         #page1{
  33.             position: absolute;
  34.             -webkit-transform:rotateX(0deg);
  35.             -webkit-transform-origin:bottom;
  36.             -webkit-transition:-webkit-transform 1s linear;
  37.  
  38.         }
  39.         #page2{
  40.             position: absolute;
  41.             -webkit-transform:rotateY(-90deg);
  42.             -webkit-transform-origin:right;
  43.             -webkit-transition:-webkit-transform 1s linear;
  44.         }
  45.         #page3{
  46.             position: absolute;
  47.             -webkit-transform:translateZ(-300px);
  48.         }
  49.         #page4{
  50.             position: absolute;
  51.             -webkit-transform-origin:left;
  52.             -webkit-transform:rotateY(90deg);
  53.         }
  54.         #page5{
  55.             position: absolute;
  56.             -webkit-transform-origin:top;
  57.             -webkit-transform:rotateX(-90deg);
  58.         }
  59.         #page6{
  60.             position: absolute;
  61.             -webkit-transform-origin:bottom;
  62.             -webkit-transform:rotateX(90deg);
  63.         }
  64. /*        #page2,#page3,#page4,#page5{
  65.             position: absolute;
  66.             -webkit-transform:rotateX(90deg);
  67.             -webkit-transform-origin:bottom;
  68.             -webkit-transition:-webkit-transform 1s linear;
  69.         }*/
  70.         #dd{
  71.             position: absolute;
  72.             top: 400px;
  73.         }
  74.     </style>
  75.     <script>
  76.         window.onload = function(){
  77.             var index = 1;
  78.             var con = document.getElementById("con");
  79.             setInterval(function(){
  80.                 con.style.webkitTransform = "rotateY("+index+"deg) rotateX("+index+"deg) rotateZ("+index+"deg)";
  81.                 index++;
  82.             },30);
  83.         }
  84.     </script>
  85. </head>
  86. <body>
  87. <div id="wrap">
  88.     <div id="con">
  89.         <div id="page1" class="page">1</div>
  90.         <div id="page2" class="page">2</div>
  91.         <div id="page3" class="page">3</div>
  92.         <div id="page4" class="page">4</div>
  93.         <div id="page5" class="page">5</div>
  94.         <div id="page6" class="page">6</div>
  95.     </div>
  96. </div>
  97. <!--<div id="dd"><a href="javascript:next()">next</a>  <a href="javascript:prev();">pre</a></div>-->
  98.  
  99. </body>
  100. </html>

3D正方体的更多相关文章

  1. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  2. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  3. 一个3D正方体

    一个小例子,3D的正方体 <!DOCTYPE html> <html oncontextmenu=self.event.returnValue=false onselectstart ...

  4. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  5. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  6. 8个3D视觉效果的HTML5动画欣赏

    现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...

  7. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  8. CSS3 3D的总结（初学者易懂）

    CSS3 3D案例的总结 如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...

  9. 打字机游戏Ⅱ之手速pk

    前言 demo预览->typewriter gameⅡ (chrome only 没做兼容) 别看一开始时速度不快,会线性增长的哦,反正楼主的score还没达到过40... 为什么叫Ⅱ呢?之前写 ...

随机推荐

  1. <转>如何改变讨好型人格 | 你根本不需要讨好任何人

    在我过去二十多年的生命里一直是一个“讨好者”. 我总是活在别人对我的期待中,我总是不停的追逐着别人对我的认可,我总是像个卑微的奴才一样去满足别人的需求. 但就和大多数的“讨好者”一样,我们越是寻求别人 ...

  2. Cheatsheet: 2013 08.20 ~ 08.31

    .NET Protobuf-net: the unofficial manual 5 Common C# Misconceptions What is new in the Mono project ...

  3. HashCheck

    https://github.com/gurnec/HashCheck

  4. 头文件为什么要加#ifndef #define #endif

    #ifndef 在头文件中的作用 在一个大的软件工程里面,可能会有多个文件同时包含一个头文件,当这些文件编译链接成一个可执行文件时 ,就会出现大量“重定义”的错误.在头文件中实用#ifndef #de ...

  5. WPF GroupBox样式

    来源:http://code.msdn.microsoft.com/WPF-GroupBox-Style-1d9df7c5/ 效果: XAML CODE: <Window xmlns=" ...

  6. h5上滑刷新（分页）

    $('.dom').append('<div class="loadingwrap" id="loading" style="display:n ...

  7. VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径 转

    说明 $(RemoteMachine) 设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置. $(References) 以分号分隔的引用列表被 ...

  8. chubu

    python解释型语言,不需要编译成机器认可的二进制码,而是直接从源代码运行程序. python是基于c语言开发的. python很容易嵌入到其他语言. 中文注释,必须在前边加上注释说明 : #_*_ ...

  9. iOS - OC Enum 枚举

    前言 iOS 5.0 之后,提供了新的枚举定义方式,定义枚举的同时,可以指定枚举中数据的类型. typedef NS_OPTIONS(_type, _name) new; -> 位移的,可以使用 ...

  10. HTML字符实体

    常用实体符号: