1. [图片] 20140811233657.jpg

2. [图片] 120140811233846.jpg


​3. [代码][CSS]代码

body {  
    background-color: #efefef;  
}  
#Main {  
    width: 100%;  
    text-align:center;  
    height: 300px;  
    margin: 0 auto;  
    margin-top: 100px;  
}  
.cubic {  
    width: 300px;  
    height: 300px;  
    margin:0 auto;  
    transition-duration: 6s;  
    -webkit-transform-style: preserve-3d;  
    -webkit-transform: rotateX(-10deg) rotateY(-10deg);  
    transform: rotateX(-10deg) rotateY(-10deg);  
    transform-style: preserve-3d;  
    -webkit-animation: run 5s linear infinite;  
}  
.cubicItem {  
    width: 300px;  
    height: 300px;  
    position: absolute;  
    text-align: center;  
    line-height: 300px;  
    font-size: 50px;  
    font-weight: bold;  
    color: #333;  
    background-color: #ccc;  
    transition-duration: 2s;  
}  
.cubicItem:nth-child(1) {  
    -webkit-transform: translateZ(150px);  
    transform: translateZ(150px);  
    -moz-transform: translateZ(150px);  
    -ms-transform: translateZ(150px);  
    -o-transform: translateZ(150px);  
    display: none;  flash插件
}  http://www.huiyi8.com/flashchajian/​
.cubicItem:nth-child(2) {  
    
    -webkit-transform: rotateX(180deg);  
    transform: rotateX(180deg);  
    -moz-transform: rotateX(180deg);  
    -ms-transform: rotateX(180deg);  
    -o-transform: rotateX(180deg);  
    -webkit-transform: translateZ(-150px);  
    transform: translateZ(-150px);  
    -moz-transform: translateZ(-150px);  
    -ms-transform: translateZ(-150px);  
    -o-transform: translateZ(-150px);  
}  
.cubicItem:nth-child(3) {  
    
    -webkit-transform: rotateY(270deg) translateZ(150px);  
    transform: rotateY(270deg) translateZ(150px);  
    -moz-transform: rotateY(270deg) translateZ(150px);  
    -ms-transform: rotateY(270deg) translateZ(150px);  
    -o-transform: rotateY(270deg) translateZ(150px);  
}  
.cubicItem:nth-child(4) {  
    
    -webkit-transform: rotateY(90deg) translateZ(150px);  
    transform: rotateY(90deg) translateZ(150px);  
    -moz-transform: rotateY(90deg) translateZ(150px);  
    -ms-transform: rotateY(90deg) translateZ(150px);  
    -o-transform: rotateY(90deg) translateZ(150px);  
}  
.cubicItem:nth-child(5) {  
       
    -webkit-transform: rotateX(90deg) translateZ(150px);  
    transform: rotateX(90deg) translateZ(150px);  
    -moz-transform: rotateY(90deg) translateZ(150px);  
    -ms-transform: rotateY(90deg) translateZ(150px);  
    -o-transform: rotateY(90deg) translateZ(150px);  
}  
.cubicItem:nth-child(6) {  
    
    -webkit-transform: rotateX(270deg) translateZ(150px);  
    transform: rotateX(270deg) translateZ(150px);  
    -moz-transform: rotateX(270deg) translateZ(150px);  
    -ms-transform: rotateX(270deg) translateZ(150px);  
    -o-transform: rotateX(270deg) translateZ(150px);  
}

CSS3 3D立体柜子实现的更多相关文章

  1. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  2. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  3. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  4. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  5. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  6. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  7. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

  8. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  9. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

随机推荐

  1. IE浏览器下,输入框最后不显示X

    IE浏览器下,输入框最后不显示X.设置: .login-input::-ms-clear { display: none; } .login-input::-ms-reveal { display: ...

  2. MBA人物俞洪敏:亿万富翁的生活表

    我的智商非常一般,就是比别人勤奋.我的脑袋不属于特别笨的那种,但肯定也不是顶尖聪明的类型.在北大的50个同学当中,我的智商应该属于中下水平,这说明我不是顶尖高智商. 我的勤奋一般人跟不上.我平均每天工 ...

  3. 高度平衡树 -- AVL 树

    Scheme 的表达, 优雅. #lang scheme ( define nil '() ) ( define ( root tree )( car tree ) ) ( define ( left ...

  4. 调整jvm内存

    1.使用解压tomcat     在catalina.bat的第一行增加:    set JAVA_OPTS=-Xms64m -Xmx256m -XX:PermSize=128M -XX:MaxNew ...

  5. shadow密码文件

    登录Linux会要求输入用户名和密码.通常本地文件中会存储一份用户密码,并与用户输入对比,如果相同就允许用户登录.起初用户密码存储与/etc/passwd中,但由于/etc/passwd必须供所有用户 ...

  6. java学习笔记之String.Split方法

    hello 大家好,好久不见,今天 我们要讨论的是java的split方法,或许你很早就知道了,但你真的知道吗? 我们来看看吧. 首先我们来看看我们最常用的split()方法也就是单个参数的方法 pu ...

  7. linux 面试题

    [题目]一个数组,输出重复次数最多的前你n位,倒序输出 [答案]   catwords.txt | sort | uniq -c | sort -k1,1nr | head -n [解析]   sor ...

  8. Rancher探秘一:初识Rancher

    前言:最近公司需要导入k8s管理,看了一些rancher相关内容,在此做一记录,rancher系列会根据进展不定期更新. Rancher是什么? Rancher是一个开源的企业级容器管理平台.通过Ra ...

  9. IP地址、子网掩码、网关的关系

    网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置.以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 要想理解什么是子网掩码 ...

  10. commons-dbutils:1.6 ——java.sql.SQLException: 不支持的特性

    描述:使用jdbc创建连接后,使用commons-dbutils-1.6 数据库工具类,查询报错如下:java.sql.SQLException: 不支持的特性 Query: 经过测试跟踪在commo ...