Как я могу «трансформировать:перевести» относительно предыдущего перевода? ⇐ CSS

[Anonymous]

У меня есть следующий рабочий код, который я пытаюсь упростить:

Код: Выделить всё

[tt] {
position: relative;
}
[tt]::after {
bottom: 100%;
content: attr(tt);
padding: 5px;
background: #333;
color: #fff;
}
[tt]::before,
[tt]::after {
position: absolute;
/* Middle 3 */
left: 50%;
transform: translate(-50%, 50%);
}
/* First 3 */
[tt]:nth-child(-n+3)::before,
[tt]:nth-child(-n+3)::after {
transform: translate(0 , 50%);
}
/* Last 3 */
[tt]:nth-last-child(-n+3)::before,
[tt]:nth-last-child(-n+3)::after {
transform: translate(-100%, 50%);
}
/* add animation */
[tt]:hover::before,
[tt]:hover::after {
animation: tt-move1 100ms ease-out forwards;
display: block;
}
[tt]:nth-child(-n+3):hover::before,
[tt]:nth-child(-n+3):hover::after {
animation: tt-move2 100ms ease-out forwards;
}
[tt]:nth-last-child(-n+3):hover::before,
[tt]:nth-last-child(-n+3):hover::after {
animation: tt-move3 100ms ease-out forwards;
}
@keyframes tt-move1 {
to {
transform: translate(-50%, 0);
}
}
@keyframes tt-move2 {
to {
transform: translate(0, 0);
}
}
@keyframes tt-move3 {
to {
transform: translate(-100%, 0);
}
}

/*For working demo*/
div {
/*won't work unless set relative, Something that happens in [tt]*/
top:100px;
margin: 10px;
float:left;
width: 20px;
height: 20px;
border: black solid 3px;
}

Код: Выделить всё

Приведенный выше код имеет определенную анимацию для каждого типа. элемента, чего-то, что кажется ненужным. Насколько мне известно, я просто применяю одно и то же преобразование к каждому элементу (перемещая элемент вверх по оси Y), поэтому я ожидал, что следующее также должно работать:

Код: Выделить всё

[tt] {
position: relative;
}
[tt]::after {
bottom: 100%;
content: attr(tt);
padding: 5px;
background: #333;
color: #fff;
}
[tt]::before,
[tt]::after {
position: absolute;
/* Middle 3 */
left: 50%;
transform: translate(-50%, 50%);
}
/* First 3 */
[tt]:nth-child(-n+3)::before,
[tt]:nth-child(-n+3)::after {
transform: translate(0 , 50%);
}
/* Last 3 */
[tt]:nth-last-child(-n+3)::before,
[tt]:nth-last-child(-n+3)::after {
transform: translate(-100%, 50%);
}

/*****************Changed code*******************/

/* add animation */
[tt]:hover::before,
[tt]:hover::after {
animation: tt-move 100ms ease-out forwards;
display: block;
}
@keyframes tt-move {
to {
transform: translateY(0);
}
}
/*///////////////Changed code/////////////////*/

/*For working demo*/
div {
/*won't work unless set relative, Something that happens in [tt]*/
top:100px;
margin: 10px;
float:left;
width: 20px;
height: 20px;
border: black solid 3px;
}

Код: Выделить всё

После некоторых исследований я теперь понимаю, что такое преобразование: TranslateY (Δy); — это то же самое, что сказать Transform: Translate(0,Δy);, что приводит к неожиданному результату. К сожалению, это был единственный метод, который мне удалось найти, который выглядит так, как будто он должен делать то, что я хотел.

Я ищу метод для преобразования:translate< /code> который позволяет оси X предыдущего преобразования:translate оставаться прежней, изменяя при этом только ось Y.

Есть ли другой способ добиться этого упрощения? Или я застрял в использовании повторяющегося кода выше?

Подробнее здесь: https://stackoverflow.com/questions/455 ... -translate