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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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 PDO中文乱码解决办法
2009/07/20 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php封装一个异常的处理类
2017/06/08 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
在Python的Django框架中编写错误提示页面
2015/07/22 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
24式加速你的Python(小结)
2019/06/13 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Prototype如何更新局部页面
2013/03/03 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
酒店总经理工作职责
2013/12/13 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2014年法务工作总结
2014/12/11 职场文书
python删除csv文件的行列
2021/04/06 Python
使用pytorch实现线性回归
2021/04/11 Python