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制作动感导航条示例
Jan 26 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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
简单的PHP图片上传程序
2008/03/27 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
JS 控件事件小结
2012/10/31 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python封装shell命令实例分析
2015/05/05 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python实现感知机模型的示例
2020/09/30 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
销售业务实习自我鉴定
2013/09/23 职场文书
云冈石窟导游词
2015/02/04 职场文书
公司转让协议书
2016/03/19 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python