..._旋转球体">
devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS3实现3D球体旋转动画

作者：Monodyee | 2024-02-15 20:35:59

赞

踩

旋转球体

CSS3实现3D球体旋转动画

html

  1. <div class="ball-box">
  2.     <div class="ball">
  3.         <div class="line1"></div>
  4.         <div class="line2"></div>
  5.         <div class="line3"></div>
  6.         <div class="line4"></div>
  7.         <div class="line5"></div>
  8.     </div>
  9. </div>

 css

  1. <style type="text/css">
  2.     body{
  3.         background-color: #000000;
  4.     }
  5.     .ball-box{
  6.         width: 300px;
  7.         height: 300px;
  8.         position: absolute;
  9.         left: 50%;
  10.         top: 50%;
  11.         margin: -150px 0 0 -150px;
  12.         -webkit-perspective-origin: 50% 50%;
  13.         -moz-perspective-origin: 50% 50%;
  14.         -ms-perspective-origin: 50% 50%;
  15.         -o-perspective-origin: 50% 50%;
  16.         perspective-origin: 50% 50%;
  17.         -webkit-perspective: 3000px;
  18.         -moz-perspective: 3000px;
  19.         -ms-perspective: 3000px;
  20.         -o-perspective: 3000px;
  21.         perspective: 3000px;
  22.     }
  23.     @-webkit-keyframes rotate3d {
  24.         0%{
  25.             -webkit-transform: rotateZ(-30deg) rotateY(0deg);
  26.             -moz-transform: rotateZ(-30deg) rotateY(0deg);
  27.             -ms-transform: rotateZ(-30deg) rotateY(0deg);
  28.             -o-transform: rotateZ(-30deg) rotateY(0deg);
  29.             transform: rotateZ(-30deg) rotateY(0deg);
  30.         }
  31.         100%{
  32.             -webkit-transform: rotateZ(-30deg) rotateY(360deg);
  33.             -moz-transform: rotateZ(-30deg) rotateY(360deg);
  34.             -ms-transform: rotateZ(-30deg) rotateY(360deg);
  35.             -o-transform: rotateZ(-30deg) rotateY(360deg);
  36.             transform: rotateZ(-30deg) rotateY(360deg);
  37.         }
  38.     }
  39.     @-moz-keyframes rotate3d {
  40.         0%{
  41.             -webkit-transform: rotateZ(-30deg) rotateY(0deg);
  42.             -moz-transform: rotateZ(-30deg) rotateY(0deg);
  43.             -ms-transform: rotateZ(-30deg) rotateY(0deg);
  44.             -o-transform: rotateZ(-30deg) rotateY(0deg);
  45.             transform: rotateZ(-30deg) rotateY(0deg);
  46.         }
  47.         100%{
  48.             -webkit-transform: rotateZ(-30deg) rotateY(360deg);
  49.             -moz-transform: rotateZ(-30deg) rotateY(360deg);
  50.             -ms-transform: rotateZ(-30deg) rotateY(360deg);
  51.             -o-transform: rotateZ(-30deg) rotateY(360deg);
  52.             transform: rotateZ(-30deg) rotateY(360deg);
  53.         }
  54.     }
  55.     @-ms-keyframes rotate3d {
  56.         0%{
  57.             -webkit-transform: rotateZ(-30deg) rotateY(0deg);
  58.             -moz-transform: rotateZ(-30deg) rotateY(0deg);
  59.             -ms-transform: rotateZ(-30deg) rotateY(0deg);
  60.             -o-transform: rotateZ(-30deg) rotateY(0deg);
  61.             transform: rotateZ(-30deg) rotateY(0deg);
  62.         }
  63.         100%{
  64.             -webkit-transform: rotateZ(-30deg) rotateY(360deg);
  65.             -moz-transform: rotateZ(-30deg) rotateY(360deg);
  66.             -ms-transform: rotateZ(-30deg) rotateY(360deg);
  67.             -o-transform: rotateZ(-30deg) rotateY(360deg);
  68.             transform: rotateZ(-30deg) rotateY(360deg);
  69.         }
  70.     }
  71.     @-o-keyframes rotate3d {
  72.         0%{
  73.             -webkit-transform: rotateZ(-30deg) rotateY(0deg);
  74.             -moz-transform: rotateZ(-30deg) rotateY(0deg);
  75.             -ms-transform: rotateZ(-30deg) rotateY(0deg);
  76.             -o-transform: rotateZ(-30deg) rotateY(0deg);
  77.             transform: rotateZ(-30deg) rotateY(0deg);
  78.         }
  79.         100%{
  80.             -webkit-transform: rotateZ(-30deg) rotateY(360deg);
  81.             -moz-transform: rotateZ(-30deg) rotateY(360deg);
  82.             -ms-transform: rotateZ(-30deg) rotateY(360deg);
  83.             -o-transform: rotateZ(-30deg) rotateY(360deg);
  84.             transform: rotateZ(-30deg) rotateY(360deg);
  85.         }
  86.     }
  87.     @keyframes rotate3d {
  88.         0%{
  89.             -webkit-transform: rotateZ(-30deg) rotateY(0deg);
  90.             -moz-transform: rotateZ(-30deg) rotateY(0deg);
  91.             -ms-transform: rotateZ(-30deg) rotateY(0deg);
  92.             -o-transform: rotateZ(-30deg) rotateY(0deg);
  93.             transform: rotateZ(-30deg) rotateY(0deg);
  94.         }
  95.         100%{
  96.             -webkit-transform: rotateZ(-30deg) rotateY(360deg);
  97.             -moz-transform: rotateZ(-30deg) rotateY(360deg);
  98.             -ms-transform: rotateZ(-30deg) rotateY(360deg);
  99.             -o-transform: rotateZ(-30deg) rotateY(360deg);
  100.             transform: rotateZ(-30deg) rotateY(360deg);
  101.         }
  102.     }
  103.     .ball{
  104.         height: 100%;
  105.         -webkit-transform-style: preserve-3d;
  106.         -moz-transform-style: preserve-3d;
  107.         -ms-transform-style: preserve-3d;
  108.         transform-style: preserve-3d;
  109.         -webkit-animation: rotate3d 30s linear infinite;
  110.         -moz-animation: rotate3d 30s linear infinite;
  111.         -ms-animation: rotate3d 30s linear infinite;
  112.         -o-animation: rotate3d 30s linear infinite;
  113.         animation: rotate3d 30s linear infinite;
  114.     }
  115.     .ball:after{
  116.         display: block;
  117.         content: '';
  118.         width: 1px;
  119.         height: 500px;
  120.         background-color: #ff0;
  121.         position: absolute;
  122.         top: -100px;
  123.         left: 150px;
  124.     }
  125.     .ball > div{
  126.         border: 1px #ffffff solid;
  127.         position: absolute;
  128.         width: 100%;
  129.         height: 100%;
  130.         -webkit-border-radius: 50%;
  131.         -moz-border-radius: 50%;
  132.         border-radius: 50%;
  133.     }
  134.     .ball .line1{
  135.         -webkit-transform: rotateY(0deg);
  136.         -moz-transform: rotateY(0deg);
  137.         -ms-transform: rotateY(0deg);
  138.         -o-transform: rotateY(0deg);
  139.         transform: rotateY(0deg);
  140.     }
  141.     .ball .line2{
  142.         -webkit-transform: rotateY(36deg);
  143.         -moz-transform: rotateY(36deg);
  144.         -ms-transform: rotateY(36deg);
  145.         -o-transform: rotateY(36deg);
  146.         transform: rotateY(36deg);
  147.     }
  148.     .ball .line3{
  149.         -webkit-transform: rotateY(72deg);
  150.         -moz-transform: rotateY(72deg);
  151.         -ms-transform: rotateY(72deg);
  152.         -o-transform: rotateY(72deg);
  153.         transform: rotateY(72deg);
  154.     }
  155.     .ball .line4{
  156.         -webkit-transform: rotateY(108deg);
  157.         -moz-transform: rotateY(108deg);
  158.         -ms-transform: rotateY(108deg);
  159.         -o-transform: rotateY(108deg);
  160.         transform: rotateY(108deg);
  161.     }
  162.     .ball .line1{
  163.         -webkit-transform: rotateY(144deg);
  164.         -moz-transform: rotateY(144deg);
  165.         -ms-transform: rotateY(144deg);
  166.         -o-transform: rotateY(144deg);
  167.         transform: rotateY(144deg);
  168.     }
  169. </style>

 

posted @ 2018-02-03 18:00 小白知浅 阅读( ...) 评论( ...) 编辑 收藏
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/86761
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。