CSS3 3D立体柜子实现
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立体柜子实现的更多相关文章
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...
- 3D立体菜单导航
今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
随机推荐
- IE浏览器下,输入框最后不显示X
IE浏览器下,输入框最后不显示X.设置: .login-input::-ms-clear { display: none; } .login-input::-ms-reveal { display: ...
- MBA人物俞洪敏:亿万富翁的生活表
我的智商非常一般,就是比别人勤奋.我的脑袋不属于特别笨的那种,但肯定也不是顶尖聪明的类型.在北大的50个同学当中,我的智商应该属于中下水平,这说明我不是顶尖高智商. 我的勤奋一般人跟不上.我平均每天工 ...
- 高度平衡树 -- AVL 树
Scheme 的表达, 优雅. #lang scheme ( define nil '() ) ( define ( root tree )( car tree ) ) ( define ( left ...
- 调整jvm内存
1.使用解压tomcat 在catalina.bat的第一行增加: set JAVA_OPTS=-Xms64m -Xmx256m -XX:PermSize=128M -XX:MaxNew ...
- shadow密码文件
登录Linux会要求输入用户名和密码.通常本地文件中会存储一份用户密码,并与用户输入对比,如果相同就允许用户登录.起初用户密码存储与/etc/passwd中,但由于/etc/passwd必须供所有用户 ...
- java学习笔记之String.Split方法
hello 大家好,好久不见,今天 我们要讨论的是java的split方法,或许你很早就知道了,但你真的知道吗? 我们来看看吧. 首先我们来看看我们最常用的split()方法也就是单个参数的方法 pu ...
- linux 面试题
[题目]一个数组,输出重复次数最多的前你n位,倒序输出 [答案] catwords.txt | sort | uniq -c | sort -k1,1nr | head -n [解析] sor ...
- Rancher探秘一:初识Rancher
前言:最近公司需要导入k8s管理,看了一些rancher相关内容,在此做一记录,rancher系列会根据进展不定期更新. Rancher是什么? Rancher是一个开源的企业级容器管理平台.通过Ra ...
- IP地址、子网掩码、网关的关系
网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置.以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 要想理解什么是子网掩码 ...
- commons-dbutils:1.6 ——java.sql.SQLException: 不支持的特性
描述:使用jdbc创建连接后,使用commons-dbutils-1.6 数据库工具类,查询报错如下:java.sql.SQLException: 不支持的特性 Query: 经过测试跟踪在commo ...