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

Альтернативой перемещения преобразования координат, является использование двойного вложенного элемента, где х-преобразование применяется к внешнему контейнеру, и y-преобразование с соответствующей кривой ослабления применяется к внутреннему контейнеру.