Javascript css不旋转'；工作不正常
我有一个css旋转的问题 我从codepen.io创建了这个Javascript css不旋转'；工作不正常,javascript,jquery,css,Javascript,Jquery,Css,我有一个css旋转的问题 我从codepen.io创建了这个 在这个演示中，您可以看到页面右下角的蓝色div。单击此div时，链接将以旋转动画打开。但是旋转不正确。我尝试了转换原点，但没有成功 我在这里错过了什么？在这方面有人能帮我吗 CSS HTML 我对你的css做了一些修改。这是我测试过的完整文档。 我还添加了一些注释，其中我做了一些更改。让他们像你想的那样旋转 <!DOCTYPE html> <html> <head> <
在这个演示中，您可以看到页面右下角的蓝色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>
.postButtonsWrap{
位置：固定；
宽度：45px；
高度：45px；
背景色：#469FE2；
底部：10px！重要；
右：10px！重要；
边界半径：45px；
-webkit边界半径：45px；
-moz边界半径：45px；
填充物：5px；
-webkit过渡：所有0.2秒轻松；
-webkit转换原点：右上角0px；
盒影：0 2px 5px 0 rgba（0,0,0,0.26）；
}
.activePm{
宽度：190px；
边界半径：30px！重要；
-webkit转换原点：右上角0px；
}
.菜单{
浮动：左；
宽度：0px；
高度0px；
不透明度：0；
边界半径：45px；
线高：45px；
文本对齐：居中；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
}
.菜单img{
宽度：25px；
高度：25px；
边缘顶部：9px；
}
.活动菜单{
/*修改了活动菜单*/
-webkit动画：2s无限线性；
-moz动画：2s无限线性；
-o动画：2s无限线性；
-ms动画：2s无限线性；
动画：2s无限线性；
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-o-变换原点：50%50%；
变换原点：50%50%；
宽度：45px；
高度：45px；
显示：块；
不透明度：1；
/*把你的边界半径放在这里*/
边界半径：45px；
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-o变换：旋转（360度）；
}
.activeMenu:第n个子菜单（1）{
-webkit转换延迟：1s；
-webkit过渡：全部.1秒轻松.15秒；
-moz转换：全部.1秒轻松.15秒；
-o型过渡：全部。1秒轻松。15秒；
-ms转换：全部.1秒轻松.15秒；
过渡：全部。1秒轻松。15秒；
}
.activeMenu:第n个子菜单（2）{
-webkit转换延迟：2s；
-webkit转换：全部.3s轻松.30s；
-moz转换：全部.3s轻松.30s；
-o型转换：全部3秒，轻松0.30秒；
-ms转换：全部.3s轻松.30s；
过渡：全部。3秒缓解。30秒；
}
.activeMenu:第n个子菜单（3）{
-webkit转换延迟：3s；
-webkit过渡：全部.5s轻松.45s；
-moz过渡：全部.5s缓解.45s；
-o型过渡：全部.5s缓解.45s；
-ms过渡：全部.5s缓解.45s；
过渡：全部.5s缓解.45s；
}
.activeMenu:第n个子菜单（4）{
-webkit转换延迟：4s；
-webkit过渡：全部.7秒轻松.60秒；
-moz转换：全部.7秒轻松.60秒；
-o型过渡：全部.7秒缓解.60秒；
-ms转换：全部.7秒轻松.60秒；
过渡期：全部7秒轻松0.60秒；
}
$（文档）.ready（函数（）{
$（'body'）。在（“单击“，”.postButtonsWrap”，函数（）上{
$（“#psbtn”）.toggleClass（“activePm”）；
$（“.menu”）.toggleClass（“activeMenu”）；
});
});
<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>
<!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>