Как изменить, с чего начинается переход от CSS?

Предположим, что у меня есть <div>, который я хотел бы расширить от небольшого размера до большего размера (см. this).

По умолчанию переход по ширине и высоте CSS3 на <div> начинается с верхнего левого угла и продвигается вправо. Однако я хочу, чтобы <div> расширялся из верхнего правого угла в левое нижнее.

Вот мой вопрос: есть ли способ, чтобы <div> проходил переход по ширине и высоте из верхнего правого угла в нижний левый?

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

Здесь другое изображение:

Ответ 1

Поскольку вы хотите, чтобы вещи "сдвигались", вы действительно не видите, что он растет справа налево, но Я думаю, что это достигает того, что вы (он изменяет некоторые другие поля и добавляет относительный сдвиг):

  div {
        width:100px; 
        height:100px; 
        float:left;
        margin:5px;
        position: relative;
        right: 0;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        background-color:rgba(25,25,25,0.7);
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
    }
  div:hover {
        width:200px;
        height:200px;
        margin:10px 115px 0px -105px;
        right: -110px;
    }

Обратите внимание, что просто из-за природы поплавков и смещения элементов вы получите какое-то странное поведение со многими элементами. Играйте с этой скрипкой, когда она уменьшена, поэтому есть как минимум две строки div.

Объяснение полей

Правое поле 115px выдвигает следующий элемент ( "сдвиг", который вы хотели), создавая пространство для расширения элемента. Это ширина элемента, плюс поля 5px на элементах, а также тот факт, что элемент большего размера увеличивает маржу до 10px. Именно в это пространство происходит сдвиг right. Направление самого расширения происходит через -105px, что приводит к тому, что элемент расширяется влево (как вам и хотелось).

ОБНОВЛЕНИЕ к вашим новым снимкам: Посмотрите на эту скрипту. Есть еще некоторые небольшие ошибки, но функции прекрасно основаны на наборе из трех div (для обеспечения моей функциональности есть дополнительный не семантический span).

Ответ 2

Вы можете изменить поля div:hover на что-то вроде margin:10px 10px 0px -100px; и получить желаемый эффект. Тем не менее, вам нужно будет корректировать свои поля как для div, так и для зависания (если вы не можете использовать float: right). http://jsfiddle.net/7ZUeu/14/

Ответ 3

Ожидание более подробной информации, запрашиваемой в комментариях по теме.

Теперь я понимаю задачу вроде http://jsfiddle.net/7ZUeu/34/

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  float:left;
}

.box {
  width:100px; 
  height:100px; 
  float:right;
  background:url(http://placekitten.com/200/200/) no-repeat 100% 0;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}
.box:hover {
  width:200px;
  height:200px;
}

Ответ 4

Это неполное, но, возможно, если вы завернете их в другой фиксированный div. Опять же, это своего рода уродливое, но, возможно, это в правильном направлении. (Заимствование скрипта ScottS).

div.one,.two,.three {
  display: inline-block;
  float: left;
  width:100px; 
  height:100px; 
  margin:3px;
  position: relative;
  right: 0;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  background-color:rgba(25,25,25,0.7);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

div.one:hover,div.two:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
  float:right;
}

div.three:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
}

div.fixed {
  width: 330px;
  height: 220px;
  background: whitesmoke;
}

Я также разделил divs, потому что кажется, что вы можете загладить только два из них в заданном направлении...

http://jsfiddle.net/YAGmC/1/

Ответ 5

Попробуйте следующее:

.right{
width:100px; 
height:100px; 
float:right;
background-color:#000000;
}

.right:hover{
margin-left:-300px;
width:300px;
transition:0.3s
}