ie8: возможно ли преобразование в псевдоэлементе?

Question

Мне нужно css преобразовать работу на ie8, можно ли это сделать?

я попытался Progid: DXImageTransform, но он не работает на псевдо элемент

.stack.twisted:before { 
    -ms-transform:rotate(8deg); /* IE 9 */ 
    -webkit-transform: rotate(8deg); 
    -moz-transform: rotate(8deg); 
    transform: rotate(8deg); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand'); 

} 

, чтобы понять, что мне нужно повернуть эффект, как преобразовать в CSS3 работу в ie8. Поэтому я нашел progid: DXImageTransform.Microsoft.Matrix, но он не работает в псевдоэлементе. Есть ли другой способ сделать это?

Answer 1

Существует множество решений с некоторыми действительно классными библиотеками, но мне нужно было решить ту же проблему с помощью небольшого отдельного фрагмента кода. Это также решает IE6, IE7 & ie8 проблемы матрицы преобразований с использованием Top/Left, как происхождение, а не по центру, как и со всеми другими:

// 
// Rotate a <DIV> element 
// 
// - DIV position must be absolute or relative 
// - Will use the center point of DIV as origin for tilt 
// 
// I think it will work on most browsers (including ie6, ie7 & ie8) 
// 
function divRotate(divObj, divTop, divLeft, divHeight, divWidth, newAngleDeg) 
    { 
    var radAngle = Math.PI * newAngleDeg/180; 
    var spinAngle = radAngle; 

    if (window.navigator.userAgent.indexOf ('MSIE ') <= 0 || typeof document.documentElement.style.opacity!='undefined') 
     radAngle = -radAngle; 

    var sinAngle = parseFloat(parseFloat(Math.sin(radAngle)).toFixed(8)); 
    var cosAngle = parseFloat(parseFloat(Math.cos(radAngle)).toFixed(8)); 

    var m11 = cosAngle; 
    var m12 = -sinAngle; 
    var m21 = sinAngle; 
    var m22 = cosAngle; 

    if (window.navigator.userAgent.indexOf ('MSIE ') <= 0 || typeof document.documentElement.style.opacity!='undefined') 
     { 
     divObj.style.WebkitTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')'; 
     divObj.style.MozTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + 'px,' + 0 + 'px)'; 
     divObj.style.msTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')'; 
     divObj.style.OTransform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')'; 
     divObj.style.transform = 'matrix('+ m11 +','+ m12 +','+ m21 +','+ m22 +',' + 0 + ',' + 0 + ')'; 

     divObj.style.top = divTop + 'px'; 
     divObj.style.left = divLeft + 'px'; 

     return; 
     } 

    var sinSpinAngle = -parseFloat(parseFloat(Math.sin(-spinAngle)).toFixed(8)); 
    var cosSpinAngle = parseFloat(parseFloat(Math.cos(-spinAngle)).toFixed(8)); 
    var sinAnglePerp = parseFloat(parseFloat(Math.sin(radAngle-Math.PI)).toFixed(8)); 
    var cosAnglePerp = parseFloat(parseFloat(Math.cos(radAngle-Math.PI)).toFixed(8)); 
    var halfHeight = divHeight/2; 
    var halfWidth = divWidth/2; 
    var radius = Math.sqrt(halfHeight*halfHeight + halfWidth*halfWidth); 

    var ulx = divLeft + halfWidth - radius*cosSpinAngle + sinAnglePerp*halfHeight; 
    var uly = divTop + halfHeight - radius*sinSpinAngle + cosAnglePerp*halfHeight; 

    var urx = radius*cosSpinAngle + divLeft + halfWidth + sinAnglePerp*halfHeight; 
    var ury = radius*sinSpinAngle + divTop + halfHeight + cosAnglePerp*halfHeight; 

    var lrx = radius*cosSpinAngle + divLeft + halfWidth - sinAnglePerp*halfHeight; 
    var lry = radius*sinSpinAngle + divTop + halfHeight - cosAnglePerp*halfHeight; 

    var llx = divLeft + halfWidth - radius*cosSpinAngle - sinAnglePerp*halfHeight; 
    var lly = divTop + halfHeight - radius*sinSpinAngle - cosAnglePerp*halfHeight; 

    divObj.style.filter = "filter: progid:DXImageTransform.Microsoft.Matrix(M11="+m11+", M12="+m12+", M21="+m21+", M22="+m22+", sizingMethod='auto expand');"; 

    var spinTop = Math.min(uly, ury, lry, lly); 
    var spinRight = Math.max(ulx, urx, lrx, llx); 
    var spinBottom = Math.max(uly, ury, lry, lly); 
    var spinLeft = Math.min(ulx, urx, lrx, llx); 

    divObj.style.top = spinTop + 'px'; 
    divObj.style.right = spinRight + 'px'; 
    divObj.style.bottom = spinBottom + 'px'; 
    divObj.style.left = spinLeft + 'px'; 
    }