CSS旋转图片

最新推荐文章于 2025-07-07 10:12:19 发布

原创最新推荐文章于 2025-07-07 10:12:19 发布 · 720 阅读

0 ·

CC 4.0 BY-SA版权

css样式专栏收录该内容

6 篇文章

订阅专栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>CSS旋转图片</title>  
    <style type="text/css">  
        #div_img{  
            margin: 100px auto 0;  
            transform:rotate(30deg);  
            -moz-transform:rotate(30deg);  
            -webkit-transform:rotate(30deg);  
            -o-transform:rotate(30deg);  
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
        }  
    </style>  
    </head>  
      
    <body style="width:99%; height:100%;">  
       <div id="body_div" style="text-align:center; vertical-align:middle;">  
            <img src="cat.jpg" id="div_img" width="500" height="400"/>  
       </div>  
    </body>  
    </html>