CSS3 Dịch qua một Arc

Question

Hoàn toàn có thể với CSS3 hiện tại để dịch một đối tượng (cụ thể là DIV) dọc theo một cung hoặc đường cong? Đây là một hình ảnh để giúp minh họa.

Answer 1

Bạn có thể sử dụng các phần tử lồng nhau và làm cho trình bao bọc và phần tử bên trong xoay theo hướng đối diện sao cho vòng quay của phần tử bên trong bù cho vòng quay của trình bao bọc.

Nếu bạn không cần giữ phần tử lồng nhau nằm ngang, bạn có thể bỏ qua vòng quay bên trong.

Đây là Dabblet. Ngăn xếp Snippet:

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

Ngoài ra, Lea Verou đã viết một bài viết về vấn đề này với một cách mà chỉ sử dụng một phần tử: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

Vâng, hình ảnh động có thể được tạo ra bằng cách sử dụng tài sản CSS3 transform-nguồn gốc để thiết lập các điểm luân chuyển trong góc xa bên phải để nó di chuyển như thế.

Check it out: http://jsfiddle.net/Q9nGn/4/(đưa chuột qua)

#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

Một thay thế cho việc di chuyển có nguồn gốc biến đổi, là sử dụng một phần lồng nhau đôi nơi một x-transform được áp dụng cho các thùng chứa bên ngoài, và một y-biến đổi với một đường cong nới lỏng thích hợp được áp dụng cho các thùng chứa bên trong.