4

在此处查看演示：http: //jsfiddle.net/hamidrezabstn/fgcPa/5/

当我点击中间的雨滴时，我希望它旋转到旋转圆圈的当前位置！我在JS代码下面尝试过，但它不起作用！接下来我要做的就是雨滴随着旋转的圆圈旋转！ 

 $(function() {
    $('#center').click(function() {
        var pos = $('#circle').css('transform')
        $(this).css('transform', 'pos')

        });
});
4

2 回答 2

8 
  $(function() {
    $('#center').click(function() {
        var obj, matrix;
        obj = document.getElementById('circle');
        matrix = getComputedStyle(obj).getPropertyValue('transform');
        console.log(matrix);
        //$(this).css('transform', matrix)

        });
});

在这里阅读更多http://dev.opera.com/articles/view/understanding-3d-transforms/

于 2013-08-25T13:09:01.410 回答
2

编辑：我说在动画中获取变换的当前状态是不可能的，但我错了。对于那个很抱歉 ！

无论如何，要做你想做的事，你并不需要真正得到它；就用它。

我稍微更改了您的 HTML 以将雨滴放在旋转的 div 中。

然后，使用这个 CSS：

.raindrop {
    background:center blue;
    width:50px;
    height:50px;
    border-radius: 100%;
    border-top-left-radius: 0;
    position: absolute;
    margin: auto;    
    left: 75px;
    top: 75px;
    animation: ccircle 5s infinite linear;
    -webkit-animation: ccircle 5s infinite linear;
}

.raindrop:hover {
    animation: none;
    -webkit-animation: none;

}

.axis {
    width: 200px;
    height: 200px;
    transform: scaleX(2);
    background-color: none;
    border: 1px solid black;
    left: 50px;
    position: absolute;
    top: 50px;
    border-radius: 50%;
}
.rotate {
    width: 100%;
    height: 100%;
    top: 0px;
    animation: circle 5s infinite linear;
    -webkit-animation: circle 5s infinite linear;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    position: absolute;
}
.counterrotate {
    width: 50px;
    height: 50px;
    animation: ccircle 5s infinite linear;
    -webkit-animation: ccircle 5s infinite linear;
}
.planet {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius : 50px;
    left: 0px;
    top: 0px;
    background-color: red;
    display: block;
}
@keyframes circle {
    from {   transform: rotateZ(0deg)    }
    to {        transform: rotateZ(360deg)    }
}
@-webkit-keyframes circle {
    0% {   -webkit-transform: rotateZ(0deg)    }
    100% {        -webkit-transform: rotateZ(360deg)    }
}
@keyframes ccircle {
    from {        transform: rotateZ(360deg)    }
    to {        transform: rotateZ(0deg)    }
}
@-webkit-keyframes ccircle {
    from { -webkit-transform: rotateZ(360deg) }
    to   { -webkit-transform: rotateZ(0deg)   }
}

你有这个小提琴

其中，雨滴始终随着轴 div 旋转。但它也是反向旋转的，所以它看起来是静态的。

当你悬停它时，计数旋转被禁用，它指向红色圆圈。只要您将其悬停，它将继续这样做。

要通过单击执行此操作，只需将 :hover 属性关联到一个类，然后在单击中设置该类。

于 2013-08-25T20:18:58.470 回答