CSS3跨弧线翻译 [英] CSS3 Translate across an Arc

问题描述

它是否可能与当前CSS3翻译对象（特别是DIV）沿弧或曲线？这里有一个图像来帮助说明。

解决方案

您可以使用嵌套元素，因此包装器和内部元素将旋转到相反的角度，这样内部元素的旋转将补偿包装器的旋转。

使用它可以创建具有不同曲线路径的翻译。

这里是 Dabblet 。 Stack Snippet：

  / * 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/

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.

解决方案

You can use the nested elements, so the wrapper and the inner element would rotate to the opposite angles, so that the rotation of the inner element would compensate the rotation of the wrapper.

Using that you can create the "translates" with different curved paths.

Here is a Dabblet. Stack Snippet:

/* 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/

这篇关于CSS3跨弧线翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！