Cross browser way to rotate image using CSS?

前端 未结 1 1234
再見小時候
再見小時候 2020-11-28 08:44

I have a site layout I\'m working on that has a main content area and then at each of the four corners of the content area sits a corner graphic. The overall effect is that

相关标签:
1条回答
  • 2020-11-28 09:03

    http://jsfiddle.net/tJkgP/2/

    CSS to rotate by 45 degrees:

    .desk
    {
        width: 50%;
        height: 400px;
        margin: 5em auto;
        border: solid 1px #000;
        overflow: visible;
    }
    .desk img
    {
        behavior:url(-ms-transform.htc);
        /* Firefox */
        -moz-transform:rotate(45deg);
        /* Safari and Chrome */
        -webkit-transform:rotate(45deg);
        /* Opera */
        -o-transform:rotate(45deg);
        /* IE9 */
        -ms-transform:rotate(45deg);
        /* IE6,IE7 */
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 
    
    }
    

    IE6-8 CSS came from here: CSS rotate property in IE

    0 讨论(0)
提交回复
热议问题