Как перевернуть всю букву по вертикали на четных позициях во входном элементе?

Мне нужно перевернуть все буквы по вертикали в четных позициях, сохраняя при этом буквы в нечетных позициях в элементе. Теперь я использую этот стиль css: -webkit-transform: rotateX(180deg). Но он переворачивает весь текст в элементе ввода.

Что мне делать еще? Или, может быть, это возможно в другом элементе, а не на входе?


input html css flip
person user2611714    schedule 23.07.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В настоящее время нет возможности выбрать буквы внутри элемента (или внутри значения элемента). Теоретически сработает псевдоэлемент :nth-letter(), но его не существует.

Однако вы можете использовать JavaScript, чтобы получить значение ввода, разбить строку по символу, обернуть span элементами вокруг каждого символа, поместить эти элементы в какой-либо другой контейнер и выполнить преобразование span:nth-of-type(even).

CSS

#container > span {
    display: inline-block;
}
#container > span:nth-of-type(even) {
    color: purple;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

JavaScript

$('#name').keyup(function () {
    'use strict';

    $('#container').empty();
    $(this).val().split('').forEach(function (v) {
        $('#container').append('<span>' + v + '</span>');
    });

});

Я сделал jsFiddle, чтобы продемонстрировать это.

person rink.attendant.6    schedule 23.07.2013