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实现跳动的动画效果
Sep 12 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
HTML通过表单实现酒店筛选功能
May 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
使用PHP实现Mysql读写分离
2013/06/28 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
php实现每日签到功能
2018/11/29 PHP
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
大学三年的自我评价
2013/12/25 职场文书
结婚典礼证婚词
2014/01/08 职场文书
大学军训通讯稿
2014/01/13 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
歼十出击观后感
2015/06/11 职场文书
创业计划书介绍
2019/04/24 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis