阿坝州网站建设公司

怎么利用html5和css3实现的3D滚动特效

本篇内容介绍了“怎么利用html5和css3实现的3D滚动特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联主要从事成都网站制作、做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务曲周,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

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

怎么利用html5和css3实现的3D滚动特效

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.           

  3.               

  4.             

  

  •               

  •             

    •   

  •               

  •             

    •   

  •               

  •             

    •   

  •               

  •               

  •               

  •               

  •           

  •       

  •       

  •           

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •               

  •           

  •       

    • 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. }  

    “怎么利用html5和css3实现的3D滚动特效”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    本文标题：怎么利用html5和css3实现的3D滚动特效
    文章源于：http://azwzsj.com/article/gioeds.html

    其他资讯