1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>立方体动画</title>
  6. <style type="text/css">
  7. body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
  8. margin:0;
  9. padding:0;
  10. }
  11. html,body{
  12. height: 100%;
  13. }
  14. body{
  15. /*background: url(img/body_bg.png) repeat-x;*/
  16. background-size: 100% 100%;
  17. display: flex;
  18. justify-content: center;
  19. align-items: center;
  20. }
  21. .box{
  22. width: 200px;
  23. height: 200px;
  24. /*background: blue;*/
  25. transform-style: preserve-3d;
  26. /*transform:rotateY(30deg) rotateX(-15deg);*/
  27. animation:lft_ani 8s infinite linear;
  28. }
  29. .box a{
  30. display: block;
  31. opacity: .4;
  32. border: 1px solid black;
  33. transform-style:preserve-3d;
  34. }
  35. .box .small{
  36. width: 100px;
  37. height: 100px;
  38. background: #18fa07;
  39. position: absolute;
  40. left: 50px;
  41. top: 50px;
  42. }
  43. .box .big{
  44. width: 200px;
  45. height: 200px;
  46. background:#2501fd;
  47. position: absolute;
  48. left: 0;
  49. top: 0;
  50. transition: all 1s;
  51. }
  52.  
  53. .box .big:nth-of-type(1){
  54. transform:translateZ(100px);
  55. }
  56. .box .big:nth-of-type(2){
  57. transform:translateZ(-100px);
  58. }
  59. .box .big:nth-of-type(3){
  60. transform:rotateY(-90deg) translateZ(100px);
  61. }
  62. .box .big:nth-of-type(4){
  63. transform:rotateY(90deg) translateZ(100px);
  64. }
  65. .box .big:nth-of-type(5){
  66. transform:rotateX(90deg) translateZ(100px);
  67. }
  68. .box .big:nth-of-type(6){
  69. transform:rotateX(-90deg) translateZ(100px);
  70. }
  71.  
  72. .box:hover .big:nth-of-type(1){
  73. transform:translateZ(150px);
  74. }
  75. .box:hover .big:nth-of-type(2){
  76. transform:translateZ(-150px);
  77. }
  78. .box:hover .big:nth-of-type(3){
  79. transform:rotateY(-90deg) translateZ(150px);
  80. }
  81. .box:hover .big:nth-of-type(4){
  82. transform:rotateY(90deg) translateZ(150px);
  83. }
  84. .box:hover .big:nth-of-type(5){
  85. transform:rotateX(90deg) translateZ(150px);
  86. }
  87. .box:hover .big:nth-of-type(6){
  88. transform:rotateX(-90deg) translateZ(150px);
  89. }
  90.  
  91. .box:hover{
  92. animation:lft_ani 8s infinite linear paused;
  93. }
  94.  
  95. .box .small:nth-of-type(7){
  96. transform:translateZ(50px);
  97. }
  98. .box .small:nth-of-type(8){
  99. transform:translateZ(-50px);
  100. }
  101. .box .small:nth-of-type(9){
  102. transform:rotateY(-90deg) translateZ(50px);
  103. }
  104. .box .small:nth-of-type(10){
  105. transform:rotateY(90deg) translateZ(50px);
  106. }
  107. .box .small:nth-of-type(11){
  108. transform:rotateX(90deg) translateZ(50px);
  109. }
  110. .box .small:nth-of-type(12){
  111. transform:rotateX(-90deg) translateZ(50px);
  112. }
  113.  
  114. @keyframes lft_ani{
  115. 0%{
  116. transform:rotateX(0deg) rotateY(0deg);
  117. }
  118. 100%{
  119. transform:rotateX(360deg) rotateY(360deg);
  120. }
  121. }
  122.  
  123. </style>
  124. </head>
  125. <body>
  126. <div class="box">
  127. <a href="#" class="big"></a>
  128. <a href="#" class="big"></a>
  129. <a href="#" class="big"></a>
  130. <a href="#" class="big"></a>
  131. <a href="#" class="big"></a>
  132. <a href="#" class="big"></a>
  133. <a href="#" class="small"></a>
  134. <a href="#" class="small"></a>
  135. <a href="#" class="small"></a>
  136. <a href="#" class="small"></a>
  137. <a href="#" class="small"></a>
  138. <a href="#" class="small"></a>
  139. </div>
  140. </body>
  141. </html>

（六）HTML5立方体动画设置的更多相关文章

  1. HTML5 3D动画效果

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

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

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

  3. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  4. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  5. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  6. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  7. 8款效果惊艳的HTML5 3D动画

    1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...

  8. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  9. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

随机推荐

  1. 手动创建sql数据表

    createtable  tb (    ID   int IDENTITY (1,1)     notnull, --创建列ID,并且每次新增一条记录就会加1    WokNo            ...

  2. vue2.0 transition 多个元素嵌套使用过渡

    在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果 <transition n ...

  3. jQuery鼠标滑动切换焦点图

    在线演示 本地下载

  4. SpringBoot 定义通过字段验证

    第一步:定义ValidationResult类 public class ValidationResult { // 校验结果是否有错 private boolean hasErrors = fals ...

  5. centos、linux关机与重启命令详解

    Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 1 ...

  6. elasticsearch 拼音搜索

    现在很多公司都开始使用es来做搜索,我们公司目前也有好几个业务部门在用,我主要做商户搜索,为业务部门提供基础支持.上周把呼叫中心的搜索重新整理了下,在新增几个字段后,全量同步发现通过拼音首字母搜索无法 ...

  7. Node.Js安装教程

    Node.Js安装教程 介绍下我的环境 环境 值 操作系统 win10 64bit Node.Js 8.9.4 emmmm 表格中毒了,为什么出不来效果 一.下载及安装 这个可以去Node.Js官网上 ...

  8. QT treewidget 右键菜单

    VS2012+QT5.2 ,没有ui,纯代码实现右键 方法一:常规但略麻烦 1.头文件slot中声明 QTreeWidget *tree; void showrightMenu(QPoint);//显 ...

  9. AttributeError: module 'matplotlib' has no attribute 'verbose' （pycharm中使用matplotlib 2.2.0的坑）

    AttributeError: module 'matplotlib' has no attribute 'verbose' 环境信息 本地系统:win10 本地开发环境:python(3.6.3), ...

  10. http客户端-基于boost开发

    http客户端-基于boost开发 基于BOOST编写的http客户端,作为BOOST开发学习之用.目前支持功能: http协议,单向链接返回http response code 200 可conte ...