-
-
Save felquis/2003391 to your computer and use it in GitHub Desktop.
// 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); | |
*/ |
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.
Será que vale a pena isso tudo para o IE?