Изменение CSS параметра transform
Всем доброго времени суток, возникла нестандартная задачка, облазил весь инет, не нашел того что ищу...
<div class="obj_1 zx-1" style="transform: translateY(400px) translateX(350px) translateZ(-120px) rotateX(0deg) rotateY(-5deg);"></div> Собственно нужно изменить только один параметр ( rotateX ) остальные нужно оставить без изменений ----------------------- Поясню сложность: если напрямую указать 1 параметр, то остальные обнуляются, а это не есть хорошо... если делать так: var obj_1 = $( ".obj_1" ).css("WebkitTransform");
то выдает вот такую штуку: matrix3d(0.9961946980917455, 0, 0.08715574274765817, 0, 0, 1, 0, 0, -0.08715574274765817, 0, 0.9961946980917455, 0, 350, 400, -120, 1) Собственно придется перегружать код вычислением градусов, я уж не говорю о том, что придется где-то искать учебник по геометрии =) ----------------------- Собственно, подскажите как быть... Заранее спасибо =) |
Цитата:
var obj_1 = $( ".obj_1" ).css("WebkitTransform-rotateX");
Даст что-то? |
Нет((( свойства "WebkitTransform-rotateX", есть только "WebkitTransform"
|
FreeZa,
записываем матрицу с нужными параметрами заранее потом подставляем нужное значение |
записываем матрицу с нужными параметрами заранее
Нет возможности так сделать, параметры меняются в процессе |
Есть конечно мысль, узнать все параметры трансформа не в матрице, а в а сразу градусах, и просто подставить переменную...вот только как это сделать не понятно...
|
Цитата:
var transforms = {
translateY: {value: 400, unit: 'px'},
translateX: {value: 350, unit: 'px'},
translateZ: {value: -120, unit: 'px'},
rotateX: {value: 0, unit: 'deg'},
rotateY: {value: -5, unit: 'deg'}
};
Object.defineProperty(transforms, 'stringify', {
enumerable: false,
value: function() {
var functions = [];
for (var key in this) {
var value = this[key];
functions.push(key + '(' + value.value + value.unit + ')');
}
return functions.join(' ');
}
});
transforms.rotateX.value += 10;
alert(transforms.stringify());
|
danik.js,
Спасибо! придется всеже делать через одно место, хотя нашел я вариант один... Добавил дочерний элемент, и его уже кручу верчу, но проблема в том, что объект все равно получится крутить только по одной оси =( |
Мндя...я то думал CSS изометрический движок будет сложно написать, оказалось все просто, вот только косяк с реал-таймом получается =(
|
Вобще, css-функции - это какой-то тупняк, так как к ним нет доступа из JS. Это же гон переводить объекты в строку, чтобы потом браузер снова распарсил строку в объекты.
Иначе работал filters в IE - там был доступ как из css, так и из js к нормальной модели. |
| Часовой пояс GMT +3, время: 01:33. |