一款利用html5和css3实现的3D滚动特效的教程


Posted in HTML / CSS onJanuary 04, 2015

今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:

一款利用html5和css3实现的3D滚动特效的教程

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <div class="cube">  
  3.             <div class="side side1">  
  4.             </div>  
  5.             <div class="side side2">  
  6.             </div>  
  7.             <div class="side side3">  
  8.             </div>  
  9.             <div class="side side4">  
  10.             </div>  
  11.             <div class="side side5">  
  12.             </div>  
  13.             <div class="side side6">  
  14.             </div>  
  15.         </div>  
  16.     </div>  
  17.     <div class="container container2">  
  18.         <div class="cube">  
  19.             <div class="side side1">  
  20.             </div>  
  21.             <div class="side side2">  
  22.             </div>  
  23.             <div class="side side3">  
  24.             </div>  
  25.             <div class="side side4">  
  26.             </div>  
  27.             <div class="side side5">  
  28.             </div>  
  29.             <div class="side side6">  
  30.             </div>  
  31.         </div>  
  32.     </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. body{   
  2.   height:100vh;   
  3. }   
  4. .container{   
  5.   position:absolute;   
  6.   height:100px;   
  7.   width:100px;   
  8.   left:33%;   
  9.   top:50%;   
  10.   -webkit-transform: translateX(-50%) translateY(-50%);   
  11.           transform: translateX(-50%) translateY(-50%);   
  12.   -webkit-perspective:400px;   
  13.           perspective:400px;   
  14. }   
  15. .cube{   
  16.   height:100px;   
  17.   widht:100px;   
  18.   -webkit-transform-origin:50% 50%;   
  19.           transform-origin:50% 50%;   
  20.   -webkit-transform-style:preserve-3d;   
  21.           transform-style:preserve-3d;   
  22.   -webkit-animation:rotate 4s infinite ease-in-out;   
  23.           animation:rotate 4s infinite ease-in-out;   
  24.   
  25. }   
  26. .side{   
  27.   position:absolute;   
  28.   display:block;   
  29.   height:100px;   
  30.   width:100px;   
  31. }   
  32. .side1{   
  33.   background:#41C3AC;   
  34.   -webkit-transform:translateZ(100px);   
  35.           transform:translateZ(100px);   
  36. }   
  37. .side2{   
  38.   background:#FF884D;   
  39.   -webkit-transform:rotateY(90deg) translateZ(100px);   
  40.           transform:rotateY(90deg) translateZ(100px);   
  41. }   
  42. .side3{   
  43.   background:#32526E;   
  44.   -webkit-transform:rotateY(180deg) translateZ(100px);   
  45.           transform:rotateY(180deg) translateZ(100px);   
  46. }   
  47. .side4{   
  48.   background:#65A2C5;   
  49.   -webkit-transform:rotateY(-90deg) translateZ(100px);   
  50.           transform:rotateY(-90deg) translateZ(100px);   
  51. }   
  52. .side5{   
  53.   background:#FFCC5C;   
  54.   -webkit-transform:rotateX(90deg) translateZ(100px);   
  55.           transform:rotateX(90deg) translateZ(100px);   
  56. }   
  57. .side6{   
  58.   background:#FF6B57;   
  59.   -webkit-transform:rotateX(-90deg) translateZ(100px);   
  60.           transform:rotateX(-90deg) translateZ(100px);   
  61. }   
  62.   
  63. @-webkit-keyframes rotate{   
  64.   0%{   
  65.     -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);   
  66.   }   
  67.   33.33%{   
  68.      -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);       
  69.   }   
  70.   66.66%{   
  71.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);   
  72.   }   
  73.   100%{   
  74.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);   
  75.   }   
  76. }   
  77. @keyframes rotate{   
  78.   0%{   
  79.     transform:rotateX(0deg) rotateY(0deg);   
  80.   }   
  81.   50%{   
  82.     transform:rotateX(360deg) rotateY(0deg);       
  83.   }   
  84.   100%{   
  85.     transform:rotateX(360deg) rotateY(360deg);   
  86.   }   
  87. }   
  88. a{   
  89.   font-family:helvetica;   
  90.   color:#428bca;   
  91.   text-align:center;   
  92.   display:block;   
  93. }   
  94.   
  95. .container2{   
  96.   left:66%;   
  97. }   
  98. .container2 .side{   
  99.   border-radius:50%;   
  100. }  
HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 #HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 #HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 #HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 #HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 #HTML / CSS
纯css3制作网站后台管理面板
Dec 30 #HTML / CSS
You might like
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript中的this机制
2016/01/30 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
使用Python写一个小游戏
2018/04/02 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Python3的socket使用方法详解
2020/02/18 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
行政前台岗位职责
2013/12/04 职场文书
中考标语大全
2014/06/05 职场文书
2015年安全月活动总结
2015/03/26 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL