CSS CSS3 跨弧平移
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8761993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Translate across an Arc
提问by Arron Hunt
Is it at all possible with current CSS3 to translate an object (specifically a DIV) along an arc or curve? Here's an image to help illustrate.
当前的 CSS3 是否有可能沿弧线或曲线平移对象（特别是 DIV）？这是帮助说明的图像。
采纳答案by kizu
You can use nested elements and make the wrapper and inner element rotate in opposite directions so that the rotation of the inner element compensates for the rotation of the wrapper.
您可以使用嵌套元素并使包装器和内部元素以相反的方向旋转，以便内部元素的旋转补偿包装器的旋转。
If you don't need to keep the nested element horizontal, you can omit the inner rotation.
如果不需要保持嵌套元素水平，则可以省略内部旋转。
Here is a Dabblet. Stack Snippet:
这是一个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>Also, Lea Verou wrote an article on this issue with a way that use only one element: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
此外，Lea Verou 以仅使用一个元素的方式写了一篇关于此问题的文章：http: //lea.verou.me/2012/02/moving-an-element-along-a-circle/
回答by Ivan Castellanos
Yes, that animation can be created using the transform-originCSS3 property to set the rotation point in the far right so it moves like that.
是的，可以使用transform-originCSS3 属性创建该动画，以在最右侧设置旋转点，使其像那样移动。
Check it out: http://jsfiddle.net/Q9nGn/4/(put your mouse over)
看看：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>回答by Michael Mullany
An alternative to moving the transform origin, is to use a double nested element where an x-transform is applied to the outer container, and a y-transform with an appropriate easing curve is applied to the inner container.
移动变换原点的另一种方法是使用双嵌套元素，其中 x 变换应用于外部容器，具有适当缓动曲线的 y 变换应用于内部容器。
