Created
March 8, 2012 20:55
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.