Skip to content

Instantly share code, notes, and snippets.

@felquis
Created March 8, 2012 20:55
Show Gist options
  • Save felquis/2003391 to your computer and use it in GitHub Desktop.
Save felquis/2003391 to your computer and use it in GitHub Desktop.
Faz uns calculos para aplicar o Matrix e rotacionar elementos no Internet Explorer
// 08/03/2012, 16:59 - ICOMP
// Simple Rotate Elements in IE
// by @felquis
// Thanks for Lucio, Etiqueta
window.globalVars = {rotatePI : Math.PI * 2 / 360};
$(window).load(function(){
$('[data-rotate]').each(function(i, obj){
// Valor do deg
var $obj = $(obj),
rotate = $obj.css('transform').replace(/rotate\((\-?[0-9]{1,})deg\)/i, '$1'),
// Step 1
step1 = globalVars.rotatePI * rotate,
// Step 2
costheta = Math.cos(step1),
// Step 3
sintheta = Math.sin(step1);
$obj.css('filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=0, M21=0, M22=0,SizingMethod="auto expand")');
// Step 4 Aplicar os calculos ao elemento
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
});
});
/*
Calculo básico
window.globalVars = {rotatePI : Math.PI * 2 / 360};
var rotate = -5, // < Aqui o deg ;)
step1 = globalVars.rotatePI * rotate,
costheta = Math.cos(step1),
sintheta = Math.sin(step1);
console.log(costheta, -sintheta, sintheta, costheta);
*/
@felquis
Copy link
Author

felquis commented Mar 10, 2012

Acho que não, perdi meio dia de trabalho estudando isso ai para implementar, foi até bom por que aprendi coisas novas que irei usar com CSS3, mas acho que não vale a pena não, no meu caso eu precisava muito dar um suporte parcial para o IE8, existem muitos plugin JS que fazem isso de forma grotesca, coisa que eu não gostei, então crirei classes no meu CSS do tipo #lt-ie9 .deg-5, #lt-ie9 .deg30. sendo que cada class, já tem explicito o resultado desse calculo, dessa forma não precisa de mais esforço do JS para selecionar elementos, fazer cálculos aplicar a elementos.

Achei minha solução de deixar explicito no CSS o resultado do cálculo muito melhor do que fazer com JS, o resultado de ambas as formas é muito ruim de qualquer jeito, mas é rápido e depois que já se tem uma solução como esse script acima, não precisa ficar meio período pesquisando como fazer, basta executar o cálculo e colocar no CSS é rápido, pratico e feio.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment