CSS3通過弧線進行翻譯

Question

當前的CSS3是否可以沿弧線或曲線翻譯對象（特別是DIV）？這是一張圖片來幫助說明。

Answer 1

可以使用嵌套元素並使包裝和內部元素以相反方向旋轉，以便內部元素的旋轉可補償包裝的旋轉。

如果您不需要保持嵌套元素水平，則可以省略內部旋轉。

這是Dabblet。堆棧段：

/* Arc movement */ 
 

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

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

此外，利·貝羅在這個問題上寫了一篇文章與只使用一個元素的方法：http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

是的，可以使用變換原點 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變換應用於內容器。