基于CSS3实现立方体自转效果


Posted in HTML / CSS onMarch 01, 2016

先是HTML 一个父div包含四个绝对定位的div

CSS Code复制内容到剪贴板
  1. <div class='container container--realistic'>    
  2. <div class='cube cube--ani'>    
  3. <div class='face'>1</div>    
  4. <div class='face'>2</div>    
  5. <div class='face'>3</div>    
  6. <div class='face'>4</div>    
  7. </div>    
  8. </div>   
首先,一个静态的立方体
CSS Code复制内容到剪贴板
  1. .face:nth-child() {    
  2. -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);    
  3. }    
  4. .face:nth-child() {    
  5. -webkit-transform: rotateY( deg) translateZ(.em);    
  6. }    
  7. .face:nth-child() {    
  8. -webkit-transform: rotateY(deg) translateZ(.em);    
  9. }    
  10. .face:nth-child() {    
  11. -webkit-transform: rotateY(deg) translateZ(.em);    
  12. }  
让立方体转起来
CSS Code复制内容到剪贴板
  1. .cube--ani {    
  2. -webkit-animation: rot s linear infinite;    
  3. }    
  4. @-webkit-keyframes rot {    
  5. to { -webkit-transform: rotateY(-deg) rotateX(deg); }    
  6. }  
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了,希望对大家有所帮助!
HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
用python实现百度翻译的示例代码
2018/03/09 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python用插值法绘制平滑曲线
2021/02/19 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
教师队伍管理制度
2014/01/14 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
综合实践教学反思
2014/01/31 职场文书
三项教育活动实施方案
2014/03/30 职场文书
激励员工的口号
2014/06/16 职场文书
创建文明城市标语
2014/06/16 职场文书
介绍信的写法
2015/01/31 职场文书
导师鉴定意见
2015/06/05 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
Java实现给Word文件添加文字水印
2022/02/15 Java/Android