На самом деле это грязный хак поскольку по умолчанию у всех элементов если не указано это свойство то параметр имеет значение none. Если казано только значение трансформации осей X и Y - браузер выставляет значение в transform 2D матрицу, но как только указано значение Z то матрица сразу приобретает вид 3D трансформации.
Чтобы написать как можно короче и эффективнее мне не осталось ничего другого кроме как вручную устанавливать параметры матрицы автоматически в 3D режим путем перепарса Computed Style и перегруппировки.
Вот кусок оригинального кода:
// get matrix and set a default value if not present
var matrixStart = (window.getComputedStyle(e[x], null)[prop] === 'none') ? 'matrix(1, 0, 0, 1, 0, 0)' : window.getComputedStyle(e[x], null)[prop];
var M2D = $.arguments(this.getValFromPropsBrackets('matrix',matrixStart)[1], ',');
// set matrix from 2D to 3D
if( M2D.length <= 6) {
var matrix3D = 'matrix3d('+ M2D[0] +', '+ M2D[1] +', 0, 0, '+ M2D[2] +', '+ M2D[3] +', 0, 0, 0, 0, 1, 0,'+ M2D[4] +','+ M2D[5] +', 0, 1)'
}
else {
var matrix3D = window.getComputedStyle(e[x], null)['transform'];
}
// extract matrix values
var M3D = $.arguments(this.getValFromPropsBrackets('matrix3d',matrix3D)[1], ',');
//console.log(M3D);
/*
matrix3d pattern
1, 0, 0, 0, 1 scalex 6 scaley 11 scalez
0, 1, 0, 0, 5 skewX 2 skewY
0, 0, 1, 0, 10 rotateX 9 rotateY 1 rotateZ
tx, ty , tz, 1 13 translateX 14 translateY 15 translateZ
12 - perspective
*/
В результате затрагиваемый элемент дом сразу же снабжается переупакованной матрицей 4x4 из 16ти значений. Я кстати задействовал не все параметры, которые мог и можно было достичь интересных эффектов типа блика солнечных лучей на камере если затрагивать перспективу, но это уж недокументированная фича.
Собственно. 1). считываем текущую конфигурацию матрицы. Если none, то прописывает дефолтные параметры трансформации не затрагивая и не искажая ничего 2). переупаковываем 2D матрицу в 3D матрицу с учетом 2D трансформации. 3). запускаем анимацию с параметрами полученными при "оригинальной" прописи свойства transform как по стандарту CSS, дробим все это на сегменты и запускаем анимацию каждого вектора отдельным контекстом через RAF.
В результате получаем обрисованный по матрице 3D элемент по всем трем осям если эти значения отличны от 0.
Например:
$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );
Меняем ширину с bounce, трансформируем перспективу и вращаем по всем трем осям за 900 миллисекунд используя тот же эффект bounce. Все элементарно просто на выходе.
Сейчас у меня код маленько с запашком, но я на первых порах работал в основном над самими механизмами и не внедрял никаких паттернов кроме SOLID и Module на Single Namespase. В будущем это будет переработано, но как я пока не могу придумать.
Присоединяйтесь. Код выложен на
GitHub, вся документация по API на английском. Связки в ядре элементарные специально чтобы было как можно проще и быстрее влиться в разработку.
.
