Question

我有一个css轮换问题。

我从codepen.io

创建了这个demo

在此演示中，您可以在页面的右下角看到蓝色div。单击此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>

Answer 1

我已经修改了你的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>

css rotate不会正常工作

1 个答案: