преобразование из центра текстовой строки

У меня есть преобразование css, примененное к строке текста (размер шрифта), но оно анимируется с левой стороны, я хочу, чтобы он оживлялся из центра. Я использую структуру Bootstrap, поэтому div имеет вертикальное/горизонтальное положение.преобразование из центра текстовой строки

HTML

<article class="col-md-12"> 
    <div class="lg-indx-img"> 
    <a href="..." class="linkage"></a> 
    <div class="cat-icn"> 
     <?php the_title(); ?> 
    </div> 
    </div> 
</article>

CSS

article { 
    position: relative; 
    margin-bottom: 10px; 
    width: 100%; 
} 

.linkage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

.lg-indx-img { padding: 20% 0; } 

.cat-icn { 
    position: absolute; 
    z-index: 9; 
    left: 50%; 
    top: 50%; 
    opacity: 0; 
    font-size: 15px; 
    color: #fff; 
    text-align: center; 
    transform-origin: 50% 50%; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 

.linkage:hover + .cat-icn { 
    opacity: 1; 
    font-size: 25px; 
}

когда .linkage наведен титул в .cat-icn увеличивается в размерах. Я не знаю длину текстовой строки, так как она создается Wordpress.

EDIT - Верхняя картина, что он делает сейчас, нижняя картинка, что я хочу, чтобы это сделать

enter image description here

источник

2015-06-11 user3550879

Что вы подразумеваете под словом «он анимируется с левой стороны»? – Chev

шрифт масштабируется до 25 px от 15px, но он масштабируется в верхнем левом углу текстовой строки. Таким образом, похоже, что он растягивается вправо, когда он растет – user3550879

У меня возникли трудности с пониманием визуального эффекта. Думаете, вы можете дублировать его [в демонстрации] (http://codepen.io/Chevex/pen/LVLdRy)? Если вы можете дублировать анимацию, как она есть в демоверсии, я мог бы изменить демоверсию, чтобы добиться желаемого эффекта. Думаю, это было бы проще всего, если бы вы это сделали. – Chev

Попробуйте это.

http://codepen.io/Chevex/pen/bdRvvJ

.linkage:hover + .cat-icn { 
    opacity: 1; 
    transform: scale(3); 
}

Вместо того, чтобы анимировать размер шрифта, анимировать transform свойство вместо этого. Затем в вашем правиле наведения используйте свойство transform, чтобы настроить масштаб элемента.

источник

2015-06-11 20:47:39 Chev

Функция масштабирования не работает, я использую сафари, поэтому я считаю, что есть проблема с кросс-браузером, также есть способ центрировать текст в окне ? – user3550879

Ах, нет проблем. Вам просто нужно использовать свойство '-webkit-transform'. [Протестировано в Safari] (http://codepen.io/Chevex/pen/NqgYzZ). – Chev

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

Вместо того, чтобы установить новый размер шрифта, вы можете попробовать использовать transform свойство, который должен поступить правильно, поскольку у вас есть transform-origin, уже установленный в центр.

.linkage:hover + .cat-icn { 
    transform: scale(1.5); 
}

источник

2015-06-11 20:32:36 geoffliu

Что мне нужно изменить в.cat-icon css, добавив, что значение ничего не делает – user3550879

преобразование из центра текстовой строки

ответ

Смежные вопросы