How to flip vertically all the letter at even posi

问题:

I need to flip vertically all the letter at even positions while keeping the letters at the odd positions intact in element. Now I'm using this css style: -webkit-transform: rotateX(180deg). But it flips the whole text in input element.

What should I do else? Or maybe it's possible in another element, not an input?

回答1:

At this time, there is no way to select the letters within an element (or within the value of an element). Theoretically, a :nth-letter() pseudo-element would do the trick, but this doesn't exist.

You can however use JavaScript to take the value of the input, explode the string by character, wrap span elements around each character, put these elements into some other container, and do the transformation on 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>');
    });

});

I've made a jsFiddle to demonstrate this.