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 box-sizing属性使用参考指南
Jan 08 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 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 数学运算验证码实现代码
2009/10/11 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php生成rss类用法实例
2015/04/14 PHP
php显示页码分页类的封装
2017/06/08 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript解析json实例详解
2014/11/05 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
公司成本主管岗位责任制
2014/02/21 职场文书
学校对教师的评语
2014/04/28 职场文书
小学社会实践活动总结
2014/07/03 职场文书
大学生作弊检讨书
2014/09/11 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
团队会宣传标语
2014/10/09 职场文书
创业计划书之花店
2019/09/20 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
「月刊Action」2022年5月号封面公开
2022/03/21 日漫