基于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实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 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
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python实现Windows电脑定时关机
2018/06/20 Python
详解python中sort排序使用
2019/03/23 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python 导入数据及作图的实现
2019/12/03 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
爱护花草树木的标语
2014/06/11 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android