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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
淘宝好评语大全
2014/05/05 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
客服专员岗位职责
2015/02/10 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
python playwrigh框架入门安装使用
2022/07/23 Python