<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container{

            perspective: 500px;perspective-origin: 50% 50%;

        }

        .cube{height:200px;width: 200px;margin: 50px auto;text-align: center;line-height: 200px;font-size: 50px;font-weight: bold;

             transform-style: preserve-3d;  }

        .cube div{ height: 200px;width: 200px;border: 1px solid black ;}

        .font{position: absolute;background: rgba(38, 248, 126, 0.5);}

        .back{position: absolute;background: rgba(203, 248, 180, 0.5);}

        .left{position: absolute;background: rgba(248, 141, 29, 0.5); }

        .right{position: absolute;background: rgba(128, 60, 248, 0.5); }

        .top{  position: absolute; background: rgba(50, 149, 248, 0.5);}

        .bottom{position: absolute;background: rgba(248, 10, 3, 0.5);}

        .font{ transform:translate3d(0,0,100px);}

        .back{transform: translate3d(0,0,-100px) rotateX( -180deg ) }

        .left{transform: translate3d(-100px,0,0) rotateY(-90deg);}

        .right{transform:translate3d(100px,0,0) rotateY(90deg) ;}

        .top{ transform:translate3d(0,100px,0) rotateX(-90deg) }

        .bottom{transform:translate3d(0,-100px,0) rotateX(90deg)}

        .cube{animation-name:bonce;animation-duration: 4s;animation-iteration-count: 10;animation-direction: alternate; }

        @keyframes bonce{

            0%{transform: rotate3d(1,0,0,0deg)}

            33%{transform: rotate3d(1,0,0,180deg)}

            66%{transform: rotate3d(1,0,0,180deg)}

            100%{transform: rotate3d(1,0,0,360deg)}

        }

    </style>

</head>

<body>

<div class="container">

    <div class="cube">

        <div class="font">font</div>

        <div class="back">back</div>

        <div class="left">left</div>

        <div class="right">right</div>

        <div class="top">top</div>

        <div class="bottom">bottom</div>

    </div>

</div>

</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. tpl + ccr

    不是非此即彼的场景.如下混合使用CCR+TPL的代码说明问题:It's not an either/or scenario.You can intermix CCR and TPL code like ...

  2. 本地连接图标消失；修改地址IP地址

    (1)网络连接中没有本地连接,电脑无法进行拨号.无法上网,右键点击“网上连接”选择“属性”,弹出的“网络连接”文件夹中没有本地连接的图标,类似情况处理起来要相对复杂些了,我们逐一判断故障原因,在想办法 ...

  3. mysql远程连接出现 ERROR 2003 (HY000): Can't connect to MySQL server on IP

    修改了如下两个位置,解决了这个问题: 修改/etc/mysql/my.cof配置文件:因为mysql默认只允许本机连接 修改远程连接用户权限:远程连接的用户被设置为不允许远程连接 首先修改/etc/m ...

  4. 设计模式_Proxy_代理模式

    形象例子: 跟MM在网上聊天,一开头总是“hi,你好”,“你从哪儿来呀?”“你多大了?”“身高多少呀?”这些话,真烦人,写个程序做为我的Proxy吧,凡是接收到这些话都设置好了自动的回答,接收到其他的 ...

  5. Eclipse关联JavaDoc和源代码

    1.Eclipse 关联 JavaDoc 1.在 Eclipse 菜单中点击 Window -> Preferences,在弹出框中左侧选择展开 Java 节点,点击 Installed JRE ...

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

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

  7. [Tutorial] Using the RasPi as a WiFi hostspot

    http://www.raspberrypi.org/forums/viewtopic.php?f=36&t=19120 http://wireless.kernel.org/en/users ...

  8. 教程-最全ASCII 码对照表

    第一部分由 00H 到 1FH 共 32 个,一般用来通讯或作为控制之用,有些字符可显示于屏幕,有些则无法显示在屏幕上,但能看到其效果(例如换行字符.归位字符). 第二部分是由 20H 到 7FH 共 ...

  9. ISE和Modelsim联合仿真（转）

    相信很多人会遇到过这个问题,不知如何让ISE调用Modelsim进行仿真.我也迷糊了不少时间,查查找找,终于弄明白了,所以有了本文,和大家分享一下.我尽量讲得详细点儿,多多上图. 我的环境:Windo ...

  10. 剑指OFFER之数组中出现次数超过一半的数字（九度OJ1370）

    题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2 ...