CSS3 Перевести по дуге

Question

Можно ли вообще с нынешним CSS3 переводить объект (в частности, DIV) по дуге или кривой? Вот изображение, чтобы помочь проиллюстрировать.

Answer 1

Вы можете использовать вложенные элементы и заставить оболочку и внутренний элемент вращаться в противоположных направлениях, так что вращение внутреннего элемента компенсирует вращение оболочки.

Если вам не нужно держать вложенный элемент в горизонтальном положении, вы можете опустить внутреннее вращение.

Вот Дабблет. Фрагмент стека:

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

Также Леа Веру написала статью по этому вопросу, в которой использовался только один элемент: http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

Answer 2

Да, эту анимацию можно создать, используя свойство CSS3 transform-origin, чтобы установить точку поворота в крайнем правом положении, чтобы она двигалась вот так.

Проверьте это: 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-преобразование с соответствующей кривой замедления применяется к внутреннему контейнеру.