html - 如何垂直翻转输入元素中偶数位置的所有字母？

Question

我需要在偶数位置垂直翻转所有字母，同时在元素中保持奇数位置的字母完整。现在我正在使用这种 css 样式：-webkit-transform: rotateX(180deg)。但它会翻转输入元素中的整个文本。

我还应该做什么？或者也许在另一个元素中是可能的，而不是输入？

Answer 1

此时，无法选择元素内（或元素值内）的字母。从理论上讲，: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来演示这一点。