Это можно сделать, используя чистое CSS-преобразование, но намного проще, используя SASS.
Общая идея заключается в том, что вы хотите плавно преобразовать прямоугольник в треугольник (чтобы на полпути через него была трапеция).
Проблема в том, что любое линейное преобразование преобразует прямоугольник в параллелограмм (квад со всеми параллельными сторонами), и мы хотим треугольник.
Это означает, что нам нужно нелинейное преобразование.
Хорошая новость заключается в том, что вы можете выполнять нелинейные преобразования, делая вид, что это преобразования в 3D, а затем проецируя прямоугольник в 2D-пространство экрана.
Подумайте о длинном тротуаре - он выглядит как треугольник.
Поэтому мы хотим повернуть прямоугольник и сделать его очень длинным.
Преобразования для первого и последнего ключевых кадров анимации очень просты: первое имеет преобразование идентичности, а последнее имеет
-webkit-transform: matrix3d(
1, 0, 0, 0,
0 , 1, 0, -9/$height,
0, 0, 1, 0,
0, 0, 0, 10
);
единственный интересный столбец - последний, в котором указано, что расстояние от зрителя должно составлять 10 "для пикселей в верхней строке и уменьшаться до 10-9 = 1 для самых нижних пикселей.
Проблема связана с промежуточными кадрами, так как алгоритм интерполяции по умолчанию, используемый браузерами, пытается интерпретировать матрицы как композицию элементарных операций, таких как вращения и переводы, а затем интерполирует каждую операцию независимо. И поскольку наше окончательное преобразование напоминает вращение на 90 в сочетании с бесконечным растяжением, интерполяция будет пытаться выполнять вращение и растяжение одновременно, что выглядит довольно странно, поскольку одно из этих движений «круговое», а другое «линейное» и скорость два не совпадают.
Чтобы компенсировать это, можно генерировать много промежуточных кадров, и для этого я использую SASS.
Окончательный результат здесь: http://codepen.io/anon/pen/ApHkc
И большая часть кредита для этого решения должна пойти автору http://persistent.info/web-experiments/distortion/, который убедил меня, что это возможно.
Также обратите внимание, что, возможно, существует много различных преобразований, которые преобразуют данный прямоугольник в данный треугольник, которые отличаются только способом отображения их внутренних областей - возможно, мое решение не является лучшим в этом отношении.