我的圆半径是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;
}