css旋轉不起作用correclty

我從codepen.io

在本演示中，你可以看到藍色的div頁面的右下角創造了這個demo。當你點擊這個div時，鏈接將以旋轉動畫打開。但旋轉不正常工作。我試過transform-origin，但沒有奏效。

我在這裏錯過了什麼？任何人都可以在這方面幫助我？

CSS

.menu { 
    float:left; 
    width:0px; 
    height:0px; 
    border-radius:45px; 
    opacity:0; 
    text-align:center;line-height:45px; 
-webkit-transform:rotate(0deg); 
-moz-transform:rotate(0deg); 
-o-transform:rotate(0deg); 
} 
.menu img { 
    width: 25px; 
    height: 25px; 
    margin-top: 9px; 
} 
.activeMenu { 
    width:45px; 
    height:45px; 
    display:block; 
    opacity:1; 
    transform-origin:50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 
-webkit-animation: 2s infinite linear; 
-moz-animation: 2s infinite linear; 
-o-animation: 2s infinite linear; 
-ms-animation: 2s infinite linear; 
animation: 2s infinite linear; 
} 

.activeMenu:nth-child(1){ 
    -webkit-transition-delay: 1s; 
-webkit-transition: all .1s ease .15s; 
    -moz-transition: all .1s ease .15s; 
    -o-transition: all .1s ease .15s; 
    -ms-transition: all .1s ease .15s; 
    transition: all .1s ease .15s; 
} 
.activeMenu:nth-child(2){ 
    -webkit-transition-delay: 2s; 
-webkit-transition: all .3s ease .30s; 
    -moz-transition: all .3s ease .30s; 
    -o-transition: all .3s ease .30s; 
    -ms-transition: all .3s ease .30s; 
    transition: all .3s ease .30s; 
} 
.activeMenu:nth-child(3){ 
    -webkit-transition-delay: 3s; 
    -webkit-transition: all .5s ease .45s; 
    -moz-transition: all .5s ease .45s; 
    -o-transition: all .5s ease .45s; 
    -ms-transition: all .5s ease .45s; 
    transition: all .5s ease .45s; 
} 
.activeMenu:nth-child(4){ 
    -webkit-transition-delay: 4s; 
-webkit-transition: all .7s ease .60s; 
    -moz-transition: all .7s ease .60s; 
    -o-transition: all .7s ease .60s; 
    -ms-transition: all .7s ease .60s; 
    transition: all .7s ease .60s; 
}

HTML

<div class="postButtonsWrap" id="psbtn"> 
    <div class="menu"><img src="http://www.nabi.res.in/Images/fb.gif"></div> 
    <div class="menu"><img src="http://www.budget.com/budgetWeb/images/common/twitter1.png"></div> 
    <div class="menu"><img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico"></div> 
    <div class="menu"><img src="http://www.yellowpagescr.com/images/google-plus-icon-png-transparent.png"></div> 
</div>

來源

2016-01-08 Azzo

你可以在jsfiddle中添加你的代碼嗎？ –

@HarshSanghani codepen.io網站就足夠了，我認爲。 – Azzo

「但是，旋轉不工作correclty」以什麼方式？並在哪個瀏覽器？在OSX上的Chrome上適合我工作 – SlashmanX

我已經修改了你的CSS一點。這是我測試過的完整文檔。我也添加了評論，我做了一些更改。讓他們的圖標像你想要的那樣旋轉。

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <style> 
      .postButtonsWrap { 
       position:fixed; 
       width:45px; 
       height:45px; 
       background-color:#469FE2; 
       bottom:10px !important; 
       right:10px !important; 
       border-radius:45px; 
       -webkit-border-radius:45px; 
       -moz-border-radius:45px; 
       padding:5px; 
       -webkit-transition: all 0.2s ease; 
       -webkit-transform-origin: right top 0px; 
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 
      } 
      .activePm { 
       width:190px; 
       border-radius:30px !important; 
       -webkit-transform-origin: right top 0px; 
      } 
      .menu {     
       float:left; 
       width: 0px; 
       height 0px; 
       opacity: 0; 
       border-radius: 45px; 
       line-height: 45px; 
       text-align:center; 

       -webkit-transform:rotate(0deg); 
       -moz-transform:rotate(0deg); 
       -o-transform:rotate(0deg); 
      } 
      .menu img { 
       width: 25px; 
       height: 25px; 
       margin-top: 9px; 
      } 
      .activeMenu { 
       /*MODIFIED THE ACTIVE MENU*/ 
       -webkit-animation: 2s infinite linear; 
       -moz-animation: 2s infinite linear; 
       -o-animation: 2s infinite linear; 
       -ms-animation: 2s infinite linear; 
       animation: 2s infinite linear; 

       -webkit-transform-origin: 50% 50%; 
       -moz-transform-origin: 50% 50%; 
       -o-transform-origin: 50% 50%; 
       transform-origin: 50% 50%; 

       width:45px; 
       height:45px; 
       display:block; 
       opacity:1; 

       /*PLACED YOUR BORDER RADIUS HERE*/ 
       border-radius: 45px; 

       -webkit-transform:rotate(360deg); 
       -moz-transform:rotate(360deg); 
       -o-transform:rotate(360deg);      
      } 
      .activeMenu:nth-child(1){ 
       -webkit-transition-delay: 1s; 
       -webkit-transition: all .1s ease .15s; 
       -moz-transition: all .1s ease .15s; 
       -o-transition: all .1s ease .15s; 
       -ms-transition: all .1s ease .15s; 
       transition: all .1s ease .15s; 
      } 
      .activeMenu:nth-child(2){ 
       -webkit-transition-delay: 2s; 
       -webkit-transition: all .3s ease .30s; 
       -moz-transition: all .3s ease .30s; 
       -o-transition: all .3s ease .30s; 
       -ms-transition: all .3s ease .30s; 
       transition: all .3s ease .30s; 
      } 
      .activeMenu:nth-child(3){ 
       -webkit-transition-delay: 3s; 
       -webkit-transition: all .5s ease .45s; 
       -moz-transition: all .5s ease .45s; 
       -o-transition: all .5s ease .45s; 
       -ms-transition: all .5s ease .45s; 
       transition: all .5s ease .45s; 
      } 
      .activeMenu:nth-child(4){ 
       -webkit-transition-delay: 4s; 
       -webkit-transition: all .7s ease .60s; 
       -moz-transition: all .7s ease .60s; 
       -o-transition: all .7s ease .60s; 
       -ms-transition: all .7s ease .60s; 
       transition: all .7s ease .60s; 
      }  
     </style> 
     <script> 
      $(document).ready(function() { 
       $('body').on("click", ".postButtonsWrap", function(){ 
       $("#psbtn").toggleClass("activePm"); 
       $(".menu").toggleClass("activeMenu"); 
       }); 
      });  
     </script> 
    </head> 
    <body> 
     <div> 
      <div class="postButtonsWrap" id="psbtn"> 
       <div class="menu"><img src="http://www.nabi.res.in/Images/fb.gif"></div> 
       <div class="menu"><img src="http://www.budget.com/budgetWeb/images/common/twitter1.png"></div> 
       <div class="menu"><img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico"></div> 
       <div class="menu"><img src="http://www.yellowpagescr.com/images/google-plus-icon-png-transparent.png"></div> 
      </div> 
     </div>  
    </body> 
</html>

來源

2016-01-08 13:49:08 c00ki3s

css旋轉不起作用correclty

回答

相關問題