Покажите обратную сторону, используя единичную матрицу -1, умноженную на CSS. ⇐ CSS

[Anonymous]

Я хотел бы применить гомографию

к квадрату с длиной стороны 200 пикселей, где k варьируется от 0 до 0,02.
Согласно этой демонстрации, для квадрата со стороной 2, когда k=1, левый край уйдет в бесконечность, а когда k>1, " backface» появится с правой стороны.
В моем случае квадрат имеет длину стороны 200 пикселей. При k=1 левый край уйдет в бесконечность, а при k>0,01 «задняя грань» появится с правой стороны.
Первоначальная попытка:

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

#div1 {
height: 200px;
width: 200px;
border: solid 1px;
transform-style: preserve-3d;
animation: squareMotion 2s alternate linear infinite;
background: rgba(100,100,100,0.5);
}

@keyframes squareMotion {
from {
transform: matrix3d(
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1
);
}
to {
transform: matrix3d(
1,0,0,0.02,
0,1,0,0,
0,0,1,0,
0,0,0,1
);
}
}

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

но задняя поверхность (когда k>0,01) не отображается.
Я вижу самопересекающийся четырехугольник в инспекторе элементов Firefox. Ожидаемая «обратная сторона» должна находиться справа на внешней стороне.



Затем я помещаю внутрь него идентичный , который служит «обратной стороной».

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

#div1 {
height: 200px;
width: 200px;
border: solid 1px;
transform-style: preserve-3d;
animation: squareMotion 2s alternate linear infinite;
background: rgba(100,100,100,0.5);
}

#div2 {
height: 200px;
width: 200px;
border: solid 1px;
transform: matrix3d(
-1,0,0,0,
0,-1,0,0,
0,0,-1,0,
0,0,0,-1
);
background: rgba(100,100,100,0.5);
}

@keyframes squareMotion {
from {
transform: matrix3d(
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1
);
}
to {
transform: matrix3d(
1,0,0,0.02,
0,1,0,0,
0,0,1,0,
0,0,0,1
);
}
}

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

тогда, как и ожидалось, справа появится серая «обратная сторона».


Я думаю, что матрица идентичности, умноженная на -1, дает ту же гомографию, что и матрица идентичности.
Выше я задаюсь вопросом, почему матрица идентичности, умноженная на -1, может использоваться для отображения «обратной стороны».

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

matrix3d(
-1,0,0,0,
0,-1,0,0,
0,0,-1,0,
0,0,0,-1
);

(Эта концепция «backface», кажется, отличается от обычного «backface» в CSS backface-visibility, но я не знаю, есть ли для нее подходящее слово . Но если вы внимательно вычислите гомографию, вы обнаружите, что внутренняя часть квадрата отображается точно в серую область под гомографией.)

Подробнее здесь: https://stackoverflow.com/questions/790 ... rix-in-css