CSS3 平移弧线

Question

当前的 CSS3 是否可以沿弧线或曲线平移对象(特别是 DIV)？这里有一张图片可以帮助说明。

Answer 1

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

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

这是一个Dabblet .堆栈片段:

/* 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);
}

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

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