ie8：在伪元素中有可能有变换吗？ [英] ie8: is there possible to have transform in pseudo element?

问题描述

我尝试了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但它不工作在伪元素。还有其他方法吗？

解决方案

有很多解决方案有一些非常酷的库，但我需要处理同样的问题与一个小的独立代码片段。这也解决了ie6，ie7& ie8使用Top / Left作为原点而不是中心的矩阵变换问题与所有其他问题一样：

  // 
 //旋转< DIV>元素
 // 
 //  -  DIV位置必须是绝对或相对的
 //  - 将使用DIV的中心点作为倾斜的原点
 // 
 / /我认为它将在大多数浏览器（包括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'; 
} 
  

i need css transform work on ie8, is there possible to do that?

i tried progid:DXImageTransform but it is not working on pseudo element

.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');

}   

to make it clear, i need rotate effect like transform in css3 work in ie8. So i found progid:DXImageTransform.Microsoft.Matrix but it doesn't work in pseudo element. Is there other way to do that?

解决方案

There are a lot of solutions with some really cool libraries, but I needed to handle the same problem with a small stand-alone snippet of code. This also solves the ie6,ie7 & ie8 problem of matrix transforms using Top/Left as the origin instead of the center as it is with all others:

//
// 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';
    }

这篇关于ie8：在伪元素中有可能有变换吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！