1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .container{
  8.             perspective: 500px;perspective-origin: 50% 50%;
  9.         }
  10.         .cube{height:200px;width: 200px;margin: 50px auto;text-align: center;line-height: 200px;font-size: 50px;font-weight: bold;
  11.              transform-style: preserve-3d;  }
  12.         .cube div{ height: 200px;width: 200px;border: 1px solid black ;}
  13.         .font{position: absolute;background: rgba(38, 248, 126, 0.5);}
  14.         .back{position: absolute;background: rgba(203, 248, 180, 0.5);}
  15.         .left{position: absolute;background: rgba(248, 141, 29, 0.5); }
  16.         .right{position: absolute;background: rgba(128, 60, 248, 0.5); }
  17.         .top{  position: absolute; background: rgba(50, 149, 248, 0.5);}
  18.         .bottom{position: absolute;background: rgba(248, 10, 3, 0.5);}
  19.         .font{ transform:translate3d(0,0,100px);}
  20.         .back{transform: translate3d(0,0,-100px) rotateX( -180deg ) }
  21.         .left{transform: translate3d(-100px,0,0) rotateY(-90deg);}
  22.         .right{transform:translate3d(100px,0,0) rotateY(90deg) ;}
  23.         .top{ transform:translate3d(0,100px,0) rotateX(-90deg) }
  24.         .bottom{transform:translate3d(0,-100px,0) rotateX(90deg)}
  25.         .cube{animation-name:bonce;animation-duration: 4s;animation-iteration-count: 10;animation-direction: alternate; }
  26.         @keyframes bonce{
  27.             0%{transform: rotate3d(1,0,0,0deg)}
  28.             33%{transform: rotate3d(1,0,0,180deg)}
  29.             66%{transform: rotate3d(1,0,0,180deg)}
  30.             100%{transform: rotate3d(1,0,0,360deg)}
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <div class="container">
  36.     <div class="cube">
  37.         <div class="font">font</div>
  38.         <div class="back">back</div>
  39.         <div class="left">left</div>
  40.         <div class="right">right</div>
  41.         <div class="top">top</div>
  42.         <div class="bottom">bottom</div>
  43.     </div>
  44. </div>
  45. </body>

container这个div是最后加的，将透视加到cube上时，旋转过程正会有变形。

CSS3 动态魔方的展示的更多相关文章

  1. CSS3 制作魔方 - 玩转魔方

    在上一篇<CSS3 制作魔方 - 形成魔方>中介绍了一个完整魔方的绘制实现,本文将介绍魔方的玩转,支持上下左右每一层独立地旋转.先来一睹玩转的风采. 1.一个问题 由于魔方格的位置与转动的 ...

  2. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. jQuery+PHP+Ajax动态数字统计展示实例

    jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...

  4. CSS3实现魔方动画

    本文将借助css3实现魔方动画效果,设计思路如下: HTML方面采用六个div容器形成六个立方面: CSS方面采用transform-style: preserve-3d;形成三维场景:transfo ...

  5. css3动态旋转魔方练习

    图片素材: html部分: <!DOCTYPE html><html><head> <meta charset="utf-8" /> ...

  6. CSS3 制作魔方 - 形成魔方

    道路千万条,安全第一条! 魔方结构解析 从魔方的外观来看,可以有多种方式来表达它的组成,从而也有多种方式来形成一个魔方.如: 由六个面组成 由若干层组成 由多个方块组成 无论哪种方式,都可以制作魔方. ...

  7. Winform开发主界面菜单的动态树形列表展示

    我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一 ...

  8. CSS3 制作魔方 - 相关立体样式

    最好的实践,就是给定一个实践的目标去实践. 目标:利用 CSS3 的一些特性,绘制一个魔方,要可以玩转的那种,即上下左右每一层都可以独立旋转.效果如下: 为了完成此效果,将使用到以下相关概念和样式:坐 ...

  9. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

随机推荐

  1. 转换时间为 “XX分钟之前”

    public static string getTimeAgo(string strDate) { string strTime = string.Empty; if (clsCommon.IsDat ...

  2. 017QTP 描述性编程的使用方法

    一.什么时候使用描述性编程 在测试过程中,有些界面元素是动态出现或动态变化的,在录制的时候并没有添加到对象库中 二.描述性编程的运行原理 用描述性编程编写的测试脚本在运行时,QTP会使用测试脚本中给出 ...

  3. [selenium webdriver Java]使用自定义条件同步测试

    Selenium WebDriver可以结合ExpectedCondition类来定义自己期望的条件 创建一个新的ExpectedCondition接口,必须实现apply方法 等待元素出现 publ ...

  4. [tensorflow in a nutshell] tensorflow简明教程 （第一部分）

    原文链接: https://medium.com/@camrongodbout/tensorflow-in-a-nutshell-part-one-basics-3f4403709c9d#.31jv5 ...

  5. bzoj 3198 [Sdoi2013]spring（容斥原理+Hash）

    Description Input Output Sample Input 3 3 1 2 3 4 5 6 1 2 3 0 0 0 0 0 0 4 5 6 Sample Output 2 HINT [ ...

  6. usb 驱动

    usb 驱动学习总结: usb 采用分层的拓扑结构,金字塔型,最多是7层.usb 是主从结构,主和主或者从和从之间不能交换数据.理论上一个usb主控制器最多可接127个设备,协议规定每个usb设备具有 ...

  7. HDU-4605 Magic Ball Game 树状数组+离散+dfs

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4605 题意:给一颗树,每个节点有个权值w[u],每个节点只有两个儿子或者没有儿子,从根节点放下一个小球 ...

  8. iphone练习之手势识别(双击、捏、旋转、拖动、划动、长按）UITapGestureRecognizer

    首先新建一个基于Sigle view Application的项目,名为GestureTest;我的项目结构如下: 往viewController.xib文件里拖动一个imageView,并使覆盖整个 ...

  9. HTML5随笔

    1 首先介绍一下html5,以及为什么用html5, HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体.HTM ...

  10. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...