Блог

Главная - Вопросы по программированию - Преобразование CSS поворот выравнивание вершины родительского элемента с динамической шириной

Преобразование CSS поворот выравнивание вершины родительского элемента с динамической шириной

#css #css-transforms

#css #css-преобразования

Вопрос:

Пример: http://mattharris.org/index2.html

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

Что я делаю не так?

Спасибо!

HTML: 

 <div class="container">
  <div class="header">
    <h1 class="title">MattHarris dot Com</h1>
  </div>
  <div class="sepbar"></div>
  <div class="wrapper">
    <div class="content">
      <div class="box">
        <div class="vertical-text">Skills</div>
      </div>
      <div class="box">
        <div class="vertical-text">Resume</div>
      </div>
      <div class="box">
        <div class="vertical-text">Contact</div>
      </div>
    </div>
  </div>
  <div class="sepbar"></div>
</div>

CSS: 

 .box {
    width: 33.3%;
    height: 100%;
    float: left;
    font-size: 2em;
    cursor: pointer;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.vertical-text {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    text-transform: uppercase;
    width: 4%;
}

.box:hover {
    filter: alpha(opacity=100);
    opacity: 1.0;
}

.box:nth-child(1) { background-color: #9dc9d2; }

.box:nth-child(2) { background-color: #a8cfd7; }

.box:nth-child(3) { background-color: #b3d5dc; }

JS:

 $(".box").click(function() {
    var link = $(this).text().toLowerCase();
    link = link.replace(/^s /, '');
    link = link.replace(/s $/, '');
    switch(link) {
        case "skills":
            $(".box:nth-child(1)").animate({width:"92%"});
            $(".box:nth-child(2)").animate({width:"4%"});
            $(".box:nth-child(3)").animate({width:"4%"});
            break;
        case "resume":
            $(".box:nth-child(1)").animate({width:"4%"});
            $(".box:nth-child(2)").animate({width:"92%"});
            $(".box:nth-child(3)").animate({width:"4%"});
            break;
        case "contact":
            $(".box:nth-child(1)").animate({width:"4%"});
            $(".box:nth-child(2)").animate({width:"4%"});
            $(".box:nth-child(3)").animate({width:"92%"});
            break;
    }
});

Комментарии:

1. Вы должны включить соответствующий код в сам вопрос. Это значительно упрощает вашу помощь в дополнение к проблеме, которая больше не появляется в вопросе после ее исправления

2. конечно, редактирование….

3. @morissette где вы хотите, чтобы текст был? На полпути из коробки или полностью содержится в коробке?

4. Нет, я бы хотел, чтобы текст был в поле с минимальным заполнением и оставался в этом месте при изменении ширины родительского элемента

5. @Dennis развернуть — вверху слева

Ответ №1:

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

Если вы зададите своим элементам фиксированную ширину, а не процент, эта проблема не возникнет.

Вот скрипка, ключевая часть:

 .vertical-text {
    width: 30px;
}

http://jsfiddle.net/John_C/tE5Ht/

Вот решение, примененное к вашей скрипке:

http://jsfiddle.net/John_C/NQ8a5/1/

Комментарии:

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

2. Спасибо, подобные проблемы могут расстраивать, если вы не знаете их причину!

Ответ №2:

Есть другой способ, который логически лучше учитывает функцию преобразования поворота.

transform-origin позволяет изменять начало координат для преобразований элемента. transform-origin rotate() Функция по умолчанию является центром вращения.

Таким образом, вы могли бы поместить начало координат слева внизу с transform-origin: 0 100% 0; . Значениями являются координаты X, Y и Z. В этом решении вам также необходимо установить height и аналогичное отрицательное значение margin-left (которое при сквозном преобразовании должно быть margin-top).

Выдержка из CSS: 

 .vertical-text {
    height: 2.2rem;
    margin-top: -2.2rem;
    -webkit-transform: rotate( 90deg );
       -moz-transform: rotate( 90deg );
        -ms-transform: rotate( 90deg );
         -o-transform: rotate( 90deg );
            transform: rotate( 90deg );
    -webkit-transform-origin: 0 100% 0;
       -moz-transform-origin: 0 100% 0;
        -ms-transform-origin: 0 100% 0;
         -o-transform-origin: 0 100% 0;
            transform-origin: 0 100% 0;
    line-height: 2.2rem;
    text-transform: uppercase;
}

И JSFiddle.

Я также добавил высоту строки, чтобы текст был центрирован по вертикали в поле, и установил значение длины в rem , но вы можете использовать пиксели или ems по своему усмотрению.

Это решение может показаться немного более сложным, чем просто настройка width , но вам вообще не нужно заботиться о длине текста и иметь динамическую ширину во всех полях.