css3 матрица Библиотека
есть в css3 transform такая штука как матрица
видел ли ктонибудь библиотеку способную выполнять преобразования над этой матрицей. что то вроде matrix=new Matrix(0,0,0,0,0,0) matrix.rotate(12); matrix.scale(2); тоесть применял операции к матрице мне нестолько библиотека нужна, сколько образцы формул UPD. вот стоит задать вопрос как тутже находится ответ https://github.com/heygrady/transform/tree/master/src вроде то что нужно |
А зачем нужна матрица и что она делает? Я часто видел это но не понимал;
|
Цитата:
Цитата:
|
И зачем это нужно если можно просто ротейты и скейлы прописать и комп все сам вычислит?
|
Цитата:
Цитата:
спека всему голова. я брал отсюда, когда делал трансформации для IE. |
А покажите пожалуйста примеры если вам не трудно;
|
Цитата:
допустим я хочу узнать на какой угол сейчас повёрнут элемент. причём повёрнут он в CSS ниже небольшой эксперемент 1) Попробуем извлечь значение transform из стиля элемента. (но там нечего нет так как в style мы незаписывали нечего) 2) Попробуем извлечь значение transform из расчитанного стиля. (но тут я получаю тоько матрицу в которой описаны все преобразования) 3) раз удалось получить только матрицу, то единственный способ узнать градусы это вычислить градусы из матрицы.
<!DOCTYPE HTML>
<html>
<head> </head>
<style>
#div1 {
background-color:#ddd;
height: 100px; width: 100px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg);
}
</style>
<body>
<br/><br/>
<div id="div1">javascript.ru</div>
<script>
//пример 1
var el=document.getElementById('div1'),
style=el.style,
transform = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
alert(transform);
console.log(style);
//пример 2
style=window.getComputedStyle(el, null),
transform = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
alert(transform);
//пример 3
alert('сейчас произведём расчёт градусов');
matrix = transform.split( '(' )[1].split( ')' )[0].split(',');
alert( Math.round(Math.atan2(matrix[1], matrix[0]) * (180/Math.PI)) );
</script>
</body>
</html>
|
CSSStyleDeclaration.prototype вау тут много интересного, спасибо;
getPropertyValue так можно получать применяемые к элементу в данный момент свойства? |
Цитата:
можно юзать getPropertyCSSValue - там очень всё удобно, и не надо проводить никаких декомпозиций матриц! оно НЕ deprecated для вычисленных стилей. |
Цитата:
var transformMatrix= Matrix.multipy( new RotationMatrix(12), new ScaleMatrix(2) ) |
| Часовой пояс GMT +3, время: 02:38. |