Центрировать DIV при анимации

Question

Центрировать DIV при анимации

0

Я делаю анимацию на множестве DIV, которые обернуты внутри div с id="wrapper" используя CSS3. Однако, если я нахожусь на закругленной рамке, анимация выравнивается по левому краю, но не выравнивается по центру. URL-адрес этого кода: http://jsfiddle.net/X5Ycu/

<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>

С уважением

Alex

visibleinvisibly 09 май 2014, в 12:52

Источник

0

Вы можете уменьшить значение свойства left во время анимации. Таким образом, вам нужно включить новые позиции во время анимации.
Irdrah 09 май 2014, в 10:39

Теги:

html

css3

css-animations

4 ответа

Ещё вопросы

Вы можете уменьшить значение свойства left во время анимации. Таким образом, вам нужно включить новые позиции во время анимации.

Ireally Rock · Answer 1 · 2014-05-09T10-00-00.000Z

изменить блоки от встроенного блока до отображения: блок добавить марж 0 автоматически удалить позицию абсолютное

Быстрая скрипка здесь http://jsfiddle.net/ktcle/X5Ycu/2/

#wrapper{
position:relative;
width: 400px
}

.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;

}

Согласовано. Проблема в том, что больше нигде не может расти округлая коробка. Определяя абсолютную левую позицию, вы бы сказали, что левая сторона этого поля всегда должна быть в этом пикселе. Следовательно это растет вправо.

pzin · Answer 2 · 2014-05-09T09-40-00.000Z

Ну, если вы используете современный CSS, как вы говорите, тогда вы можете указать:

left: 50%; /* or figure out where the center is */

А затем просто переместите элемент на его половину размера влево, что вы можете сделать с помощью transform:

transform: translateX(-50%);

Итак, теперь, даже когда ваш элемент меняет свой размер, его положение (перевод) будет меняться в соответствии с его размером. Это (перевод) всегда будет работать независимо от того, как ваш элемент позиционируется или отображается.

Вам наверняка потребуется использовать некоторые префиксы поставщиков.

Godinall · Answer 3 · 2014-05-09T09-26-00.000Z

Попробуйте ниже:

div.roundedbox:hover{
    width:100px;
    left: 137.5px; //Add this line
}

JoseAPL · Answer 4 · 2014-05-09T08-16-00.000Z

Вы можете добавить эффект маржи, например TOP и BOTTOM также RIGHT и LEFT чтобы эти два применялись к половине исходного размера

см. этот пример: http://jsfiddle.net/X5Ycu/1/

.limeball{
   margin: 0px; // original margin
   width: 100px; //original width
   height: 50px; //original height
}

.limeball{
  width: 0px;
  height:0px;
  margin: 25px 50px;
  // margin  results:
  // (original width) / 2 = 50px (LEFT AND RIGHT)
  // (original height) / 2 = 25px (TOP AND BOTTOM)
}