CSS3跨弧转换

Question

是否可以使用当前的CSS3沿弧线或曲线平移对象（特别是DIV）？这是一张有助于说明的图片。

Answer 1

您可以使用嵌套元素并使包装和内部元素以相反方向旋转，以便内部元素的旋转补偿包装器的旋转。

如果您不需要将嵌套元素保持水平，则可以省略内部旋转。

这是Dabblet。 Stack Snippet：

＆＃13;

＆＃13;

/* Arc movement */

.wrapper {
	width: 500px;
	margin: 300px 0 0;
	transition: all 1s;
	transform-origin: 50% 50%;
}
.inner {
	display: inline-block;
	padding: 1em;
	transition: transform 1s;
	background: lime;
}
html:hover .wrapper {
	transform: rotate(180deg);
}
html:hover .inner {
	transform: rotate(-180deg);
}

＆＃13;

<div class="wrapper">
    <div class="inner">Hover me</div>
</div>

＆＃13;

＆＃13;

＆＃13;

另外，Lea Verou用一种只使用一个元素的方式写了一篇关于这个问题的文章：http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

是的，可以使用 transform-origin CSS3属性创建该动画，以设置最右侧的旋转点，使其像这样移动。

检查出来：http://jsfiddle.net/Q9nGn/4/ （将鼠标放在上面）

#c {
    border: 1px solid black;
    height: 400px;
}

#c:hover #m {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 1s ease-in-out;
    -moz-transform: rotate(180deg);
    -moz-transition: all 1s ease-in-out;
    -o-transform: rotate(180deg);
    -o-transition: all 1s ease-in-out;
    -ms-transform: rotate(180deg);
    -ms-transition: all 1s ease-in-out;
    transform: rotate(180deg);
    transition: all 1s ease-in-out;
}

#m {
    width: 60px;
    height: 60px;
    position: absolute;
    background: green;
    border-radius: 30px;
    top: 270px;
    left: 20px;
    -webkit-transform-origin:300px 30px;
    -moz-transform-origin:300px 30px;
    -o-transform-origin:300px 30px;
    -ms-transform-origin:300px 30px;
    transform-origin:300px 30px;
}

<div id="c">
    <div id="m"></div>
</div>

Answer 3

移动变换原点的替代方法是使用双嵌套元素，其中x变换应用于外部容器，并且具有适当缓动曲线的y变换应用于内部容器。