css3球体旋转
前端笔记 2020-10-20 20:08:29

1、html

XML/HTML Code复制内容到剪贴板
  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>  

 

2、css

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

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/550.html

上一篇 箭头函数几个模版例子
下一篇 select选择已选中的option不触发onchange事件的解决办法
相关的文章
Powered by yoyo苏ICP备15045725号