首页 > CSS3动画,让div沿圆弧规矩移动

CSS3动画,让div沿圆弧规矩移动

我的圆半径是50px,然后我设置origin移动原点为50px 50px,为什么他不会饶圆心运动的?

        .warp{
            width: 100px;
            height: 100px;
            position: relative;
            border-radius: 100%;
            border: 1px dashed deeppink;
        }
        .warp div{
            width: 25px;
            height: 25px;
            background: skyblue;
            /*border-radius: 100%;*/
            transition: all 1s;
            position: absolute;
        }
        .warp:hover div{
            transform:rotate(360deg);
            transform-origin: 50px 50px;
        }

为何不 transform-origin: center center;


看一下
实例地址


http://www.jianshu.com/p/2606...
我之前写的一篇文章,可以参考。
里面也有具体的代码,不懂可以再讨论。


transform-origin: 50px 50px; 放到 .warp div 下面就好了。

.warp div{
    width: 25px;
    height: 25px;
    background: skyblue;
    /*border-radius: 100%;*/
    transition: all 1s;
    position: absolute;
    transform-origin: 50px 50px;
}
【热门文章】
【热门文章】