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

我需要垂直翻转偶数位置的所有字母，同时保持元素中奇数位置的字母完好无损。现在我使用这个css样式：-webkit transform:rotateX（180度）。但它在输入元素中翻转了整个文本

---

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

此时，无法选择元素内（或元素值内）的字母。理论上，一个

：n-letter（）

伪元素可以实现这一点，但它并不存在

但是，您可以使用JavaScript获取输入值，按字符分解字符串，围绕每个字符包装

span

元素，将这些元素放入其他容器中，并对

span:n类型（偶数）

进行转换

CSS JavaScript

$（'#name'）.keyup（函数（）{
"严格使用",；
$（“#容器”）.empty（）；
$（this）.val（）.split（“”）.forEach（函数（v）{
$（'#container'）。追加（'+v+''）；
});
});

我已经做了一个演示

#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);
}

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

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

});