4

私は ie8 で css 変換作業が必要ですが、それを行うことは可能ですか?

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

}

明確にするために、ie8でcss3作業の変換のような回転効果が必要です。だから私は progid:DXImageTransform.Microsoft.Matrix を見つけましたが、疑似要素では機能しません。それを行う他の方法はありますか？

4

1 に答える 1

1

いくつかの非常に優れたライブラリを使用したソリューションはたくさんありますが、同じ問題を小さなスタンドアロン コード スニペットで処理する必要がありました。これは、他のすべての場合と同様に、中心ではなく上/左を原点として使用する行列変換の ie6、ie7、および ie8 問題も解決します。

//
// 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';
    }
于 2012-08-18T19:10:12.410 に答える