CSS3正方体旋转示例代码


Posted in HTML / CSS onAugust 08, 2013

效果图:
CSS3正方体旋转示例代码 
css代码:

复制代码
代码如下:

@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}
@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}
/*************** 水平立方体 ***************/
.cube-wrap {perspective: 800px;perspective-origin: 50% 100px;float:left;margin:150px 0 0 200px;}
.cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;-moz-animation: spin 20s infinite linear;}
.cube div{position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);box-shadow: inset 0 0 30px rgba(125,125,125,0.8);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;}
.depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);}
.depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;}
.depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;}
.depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;}
.depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;}
.depth div.front-pane {transform: translateZ(100px);}
/*************** 垂直旋转的立方体 ***************/
.cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;}
.cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);}
.cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);}
.cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);}
/*************** 平面旋转的立方体 ***************/
.cube-wrap.flat {perspective: none;perspective-origin: 0 0;}

html代码:
复制代码
代码如下:

<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
<div class="cube-wrap vertical">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
<div class="cube-wrap flat">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
HTML / CSS 相关文章推荐
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 #HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 #HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 #HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 #HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 #HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 #HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 #HTML / CSS
You might like
xajax写的留言本
2006/11/25 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js选择器全面解析
2016/06/27 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
TensorFlow变量管理详解
2018/03/10 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
应聘护士自荐信
2013/10/21 职场文书
留学推荐信怎么写
2014/01/25 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
企业承诺书格式
2014/05/21 职场文书
平面设计专业求职信
2014/08/09 职场文书
村安全生产责任书
2014/08/25 职场文书
基石观后感
2015/06/12 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android