CSS3 跨弧平移

Posted 2023-03-06

【中文标题】CSS3 跨弧平移

【英文标题】：CSS3 Translate across an Arc

【发布时间】：2012-02-04 10:16:12

【问题描述】：

当前的 CSS3 是否可以沿弧线或曲线平移对象（特别是 DIV）？这是帮助说明的图像。

【问题讨论】：

如果上下文允许，您可以使用 CSS3 的 rounded corners 和边框透明度来伪造彩色抛物线。

【参考方案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/

【讨论】：

很好的答案，真的让我摆脱了动画的束缚，意识到相关动画可以做更多的事情。

【参考方案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>

【讨论】：

为了让动画继续进行，您可以通过一点数学来补偿transform-origin 的变化，这样您就可以沿不同的路径继续制作动画。 Fiddle

【参考方案3】：

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