Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157437
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
HTML5+CSS3实现3D空间六面体旋转！

分类： Html/Css

2015-12-24 17:19:20


点击(此处)折叠或打开

  1. <!DCOTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html ;charset=utf-8">
  5. <title>
  6. 3D空间六面体
  7. </title>
  8. <style type="text/css">
  9. *{
  10.     padding:0;
  11.     margin:0;
  12. }
  13. h1{
  14.     text-align:center;
  15.     margin:10px 0 0 0;
  16.     color:blue;
  17. }
  18. #view{
  19.     perspective:500px;/*创建一个3D视角*/
  20.     width:200px;
  21.     height:200px;
  22.     margin:250px auto;/*设置一个3D空间的大小和位置*/
  23. }
  24.  @-webkit-keyframes scroll{
  25.     100%{
  26.     -webkit-transform:rotate3d(1,1,1,360deg);/*创建一个包含六面体的空间旋转动画*/
  27.     }
  28.  }
  29. #contain{
  30.     width:200px;
  31.     height:200px;
  32.     position:relative;/*创建一个相对定位的包含六面体的空间*/
  33.     -webkit-transform-style:preserve-3d;/*添加3D动画属性，如果没有的话，会显示不出3D特效*/
  34.     -webkit-animation:scroll 2s linear 7s infinite;/*设置动画属性：动画名称，时间，速度，延迟时间，次数*/
  35. }
  36. .face{
  37.     width:200px;
  38.     height:200px;
  39.     background:yellow;
  40.     border:1px solid black;
  41.     font-size:150px;
  42.     text-align:center;
  43.     position:absolute;
  44. }
  45. @-webkit-keyframes face1{
  46.     100%{
  47.     -webkit-transform:rotateY(-90deg);/*旋转90度*/
  48.     -webkit-transform-origin:left;/*以左边为轴旋转*/
  49.     }
  50. }
  51. #face1{
  52.     z-index:6;/*设置层叠优先级，数值越大，越靠近上层*/
  53.     opacity:0.5;
  54.     -webkit-animation:face1 1s linear 1s both;
  55. }
  56. @-webkit-keyframes face2{
  57.     100%{
  58.     -webkit-transform:rotateY(90deg);
  59.     -webkit-transform-origin:right;
  60.     }
  61. }
  62. #face2{
  63.     z-index:5;
  64.     opacity:0.5;
  65.     -webkit-animation:face2 1s linear 2s both;
  66. }
  67. @-webkit-keyframes face3{
  68.     100%{
  69.     -webkit-transform:rotateX(90deg);
  70.     -webkit-transform-origin:top;
  71.     }
  72. }
  73. #face3{
  74.     z-index:4;
  75.     opacity:0.5;
  76.     -webkit-animation:face3 1s linear 3s both;
  77. }
  78. @-webkit-keyframes face4{
  79.     100%{
  80.     -webkit-transform:rotateX(-90deg);
  81.     -webkit-transform-origin:bottom;
  82.     }
  83. }
  84. #face4{
  85.     z-index:3;
  86.     opacity:0.5;
  87.     -webkit-animation:face4 1s linear 4s both;
  88. }
  89. @-webkit-keyframes face5{
  90.     100%{
  91.     -webkit-transform:translateZ(200PX);
  92.     }
  93. }
  94. #face5{
  95.     z-index:2;
  96.     opacity:0.5;
  97.     -webkit-animation:face5 1s linear 5s both;
  98. }
  99. @-webkit-keyframes face6{
  100.     100%{
  101.     -webkit-transform:rotateY(180deg);
  102.     }
  103. }
  104. #face6{
  105.     z-index:1;
  106.     opacity:0.5;
  107.     -webkit-animation:face6 1s linear 6s both;
  108. }

  110. </style>
  111. </head>
  112. <body>
  113. <h1>3D空间六面体</h1>
  114. <div id="view">
  115. <div id="contain">
  116. <div id="face1" class="face">1</div>
  117. <div id="face2" class="face">2</div>
  118. <div id="face3" class="face">3</div>
  119. <div id="face4" class="face">4</div>
  120. <div id="face5" class="face">5</div>
  121. <div id="face6" class="face">6</div>
  122. </div>
  123. </div>
  124. </body>
  125. </html>
PS:本代码是在Google Chrome浏览器下运行的！

阅读(2919) | 评论(0) | 转发(0) |
1

上一篇：PHP实现验证码功能

下一篇：PHP操作MYSQL数据库

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6