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中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
js 分栏效果实现代码
2009/08/29 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Scrapy爬取动态数据
2018/10/21 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
化妆品促销方案
2014/02/24 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS