css旋转不'工作不正常
css rotate doesn't work correclty
我有一个css旋转的问题。
我从codepen.io 创建了这个演示
在这个演示中，您可以在页面的右下角看到蓝色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>
我对你的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>
相关文章：
- Javascript.getHours(）工作不正常
- removeClass函数没有'工作不正常
- jQuery Ajax GET请求工作不正常
- Cordova ng路线工作不正常
- 更新属性工作不正常Meteor/MongoDB
- 为什么文本对齐:对;工作不正常
- Javascript作用域和Ajax调用;工作不正常
- JavaScript DOM insertBefore'工作不正常
- Angular Js布线工作不正常
- onmouseout函数工作不正常
- 承诺工作不正常
- JQuery.live(）工作不正常
- Alloy UI文本区域工作不正常
- ng src工作不正常，但src工作正常
- Canvas.toDataUrl(“image/png”）工作不正常
- JQuery `length`属性工作不正常.为什么?
- Javascript setInterval工作不正常
- 我的Javascript代码没有'工作不正常
- 表单验证工作不正常，在不检查条目的情况下继续
- $localStorage array select with ng选项工作不正常
