脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

  发布时间：2015-01-04 09:49:28   作者：佚名   我要评论
怎么利用css3和html5制作圆形很正方形的3D滚动特效，今天给大家带来一款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. }  

相关文章

  • CSS3 最强二维布局系统之Grid 网格布局

    CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系
    2025-02-27

  • 如何使用CSS3实现波浪式图片墙

    本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同
    2025-02-27

  • CSS3模拟实现一个雷达探测扫描动画特效(最新推荐)

    文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,
    2025-02-21

  • css3 display:flex 弹性盒模型的使用方法

    CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本
    2025-02-19

  • css3 实现icon刷新转动效果

    本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一
    2025-02-19

  • CSS3动态效果之过渡属性(最新推荐)

    CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans
    2025-02-19

  • CSS3实现动态旋转加载样式的示例代码

    本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式
    2025-02-19

  • 使用CSS3实现平滑的过渡动画效果(实例代码)

    这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid实现等高元素布局的示例代码

    本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋
    2025-02-11

  • 使用CSS3和SVG创建圆形进度条动画效果

    CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体
    2024-10-24

最新评论

关注微信公众号

扫一扫