How To Flip Vertically All The Letter At Even Positions In Input Element?

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: rotat

Solution 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.