Как да използвате CSS 3D матрицата, за да създадете изкривен деформационен ефект - css3, css-преходи

Аз се опитвам да възпроизвеждам смучещ ефект в ios използвайки css3 -webkit-transform:matrix3d() Имот.

Обаче не мога да управлявам извитите ръбове като на снимката. Най-близкото решение от мен е следното:

-webkit-transform: matrix3d(0.85, 0.0678, 0, 0, 2.37, 0.85, -1.36, -0.0019, 0, 0, -1.53, -3.73, 0, 0, 0.34, 1);

Тук е jsfiddle резултат.

Как мога да направя трансформацията като на снимката. Обърнете внимание, че десният и левият ръб са извити.

Отговори:

Аз направих търсене за css3 трансформации. Ако използвате matrix3d можете да правите линейни трансформации, които не ви позволяват да кривите нищо.

Въпреки това, текущата експериментална технология ви позволява нелинейни трансформации. Затова можете да деформирате, навийте и т.н. Това трябва да напише шейдъри, така че трябва да кодирате графичния процесор.

Adobe има лаборатория CSS Filter, която да демонстрира това. Благодарение на тях успях да приложим трансформацията, която исках. Ето екранната снимка:

И тук е кодът за управление на това

-webkit-filter:
custom(url(shaders/vertex/warp.vs) mix(url(shaders/fragment/warp.fs) normal source-atop), 20 20 border-box, k array(-0.429, -0.471, 467, -0.286, -0.507, 0, -0.086, -0.507, 0, 0.15, -0.514, 0, -0.407, -0.086, 0, -0.021, -0.171, 0, 0.193, -0.171, 0, 0.364, -0.171, 0, 0.036, 0.179, 0, 0.179, 0.171, 0, 0.35, 0.179, 0, 0.464, 0.171, 0, 0.2, 0.5, 0, 0.279, 0.5, 0, 0.414, 0.493, 0, 0.5, 0.5, 0), matrix perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), useColoredBack 1, backColor 1 1 1 1);

Можете да го тествате сами, след като активирате експериментални функции с тази връзка: http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/#suckeffect