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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
html5.2 dialog简介详解
Feb 27 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JavaScript 事件系统
2010/07/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
理解javascript中的原型和原型链
2015/07/30 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Java及python正则表达式详解
2017/12/27 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python 实现逻辑回归
2020/12/30 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
2015政治思想表现评语
2015/03/25 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS