{"id":285,"date":"2012-09-17T12:29:00","date_gmt":"2012-09-17T04:29:00","guid":{"rendered":"http:\/\/gaigaiming.com\/?p=285"},"modified":"2012-09-17T12:29:00","modified_gmt":"2012-09-17T04:29:00","slug":"css3%e4%b8%adtransform%e5%85%bc%e5%ae%b9ie","status":"publish","type":"post","link":"https:\/\/www.gaigaiming.com\/index.php\/2012\/09\/17\/css3%e4%b8%adtransform%e5%85%bc%e5%ae%b9ie\/","title":{"rendered":"css3\u4e2dtransform\u517c\u5bb9ie"},"content":{"rendered":"
\n

<\/p>\n

\uff08\u5f15\u7528QQ\u56fe\u7247\uff09<\/p>\n

transform:rotate(-30deg);\/*\u517c\u5bb9\u6027\u5f3a*\/
 -ms-transform:rotate(-30deg);\/*ie9*\/
 -o-tranform:rotate(-30deg);\/*opera*\/
 -webkit-transform:rotate(-30deg);\/*chrome safria*\/
 -moz-transform:rotate(-30deg); \/*firefox*\/<\/p>\n

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) ;<\/p>\n

\u7b14\u8bb0\uff1aMatrix \u6ee4\u955c\u5728\u65cb\u8f6c\u65b9\u9762\u9700\u8981\u7528\u5230 M11 M12 M21 M22 \u56db\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u4ee3\u8868 cos(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001-sin(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001sin(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001cos(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3002\u4f46\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f IE \u4e2d\u65cb\u8f6c\u7684\u4e2d\u5fc3\u70b9\u4f1a\u53d1\u751f\u53d8\u5316\u3002<\/p>\n

CSS <\/span> <\/span>filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 ) <\/span><\/p>\n

Scripting <\/span> <\/span>object.style.filter = "progid:DXImageTransform.Microsoft.Matrix ( sProperties ) " <\/span><\/p>\n

\u8bf4\u660e\uff1a<\/span><\/p>\n

\u4f7f\u7528\u77e9\u9635\u53d8\u5f62\u5b9e\u73b0\u5bf9\u8c61\u5185\u5bb9\u7684\u6539\u53d8\u5c3a\u5bf8\u3001\u65cb\u8f6c\u3001\u4e0a\u4e0b\u6216\u5de6\u53f3\u53cd\u8f6c\u3002<\/span><\/p>\n

\u4f7f\u7528\u6b64\u6ee4\u955c\u53ef\u4ee5\u5efa\u7acb\u4e0b\u5217\u6548\u679c\uff1a<\/span><\/p>\n

7.<\/span> <\/span>\u5de6\u53f3\u53cd\u8f6c\u3002\u5c06 M11 <\/span>\u548c <\/span>M12 <\/span>\u7684\u503c\u53d6\u8d1f\u3002 <\/span><\/span><\/p>\n

8.<\/span> <\/span>\u4e0a\u4e0b\u53cd\u8f6c\u3002\u5c06 M21 <\/span>\u548c <\/span>M22 <\/span>\u7684\u503c\u53d6\u8d1f\u3002 <\/span><\/span><\/p>\n

9.<\/span> <\/span>\u6539\u53d8\u5c3a\u5bf8\u3002\u5c06 M11 <\/span>\u548c <\/span>M12 <\/span>\u548c <\/span>M21 <\/span>\u548c <\/span>M22 <\/span>\u7684\u503c\u4e58\u4ee5\u76f8\u540c\u7684\u56e0\u6570\u3002\u5bf9\u8c61\u5185\u5bb9\u5c3a\u5bf8\u4f1a\u6309\u6bd4\u4f8b\u589e\u5927\u6216\u7f29\u5c0f\u3002 <\/span><\/span><\/p>\n

\u4f7f\u7528 padding <\/span>\u5c5e\u6027\u80fd\u591f\u4f7f\u6700\u7ec8\u56fe\u50cf\u8fb9\u89d2\u88ab\u526a\u5207\u7684\u673a\u4f1a\u964d\u5230\u6700\u5c0f\u3002 <\/span><\/span><\/p>\n

\u793a\u4f8b\uff1a<\/span><\/p>\n

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled='false') ; }<\/span><\/p>\n

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand"); }<\/span><\/p>\n

 <\/p>\n

\u5b9e\u4f8b\u4e00 \u8bb2\u89e3<\/p>\n

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text\/html; charset=utf-8">
<title>IE\u6d4f\u89c8\u5668CSS transform\u65cb\u8f6c\u5c5e\u6027\u7684\u6f14\u793a<\/title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" \/>
<style type="text\/css">
body {
 font-family: "Arial", sans-serif;
}
#ptOfRef {
 border: #000 solid 3px;
 background: #6FF;
 width: 204px;
 height: 204px;
 position: absolute;
 top: 100px;
 left: 100px;
}
#example {
 position: absolute;
 top: 100px;
 left: 100px;
 border: #09F solid 1px;
 background: #F90;
 font-weight: 900;
 color: #FFF;
 padding: 10px;
 display: block;
 width: 200px;
 height: 200px;
 margin-top: -1px;
 margin-left: -1px;
 transform: rotate(40deg);
 -o-transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
 -moz-transform: rotate(40deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)<\/strong>}
<\/style>
<!–[if IE]>
<style type="text\/css">
#example {
 top: 50px;
 left: 50px;
}
<\/style>
<![endif]–>
<\/head>
<body>
<div id="ptOfRef"><\/div>
<div id="example">\u8fd9\u662f\u4e00\u4e2aCSS\u65cb\u8f6c\u5c5e\u6027\u7684\u6f14\u793a<\/div>
<\/body>
<\/html><\/p>\n

 <\/p>\n

\u5b9e\u4f8b\u4e8c \u5e94\u7528<\/p>\n

<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd<\/a>">
<html>
<head>
  <meta http-equiv="Content-Type" content="text\/html; charset=utf-8">
  <title>css3\u5c5e\u6027transform\u517c\u5bb9ie<\/title>
  <meta name="description" content="" \/>
  <meta name="keywords" content="" \/>
<style>
body {
 background:url(http:\/\/mat1.gtimg.com\/edu\/2012\/tuipu15\/top.jpg<\/a>) top center repeat-x;
}
body {font-size:12px;font: 12px\/1.75 "\u5b8b\u4f53" b8b4f53, sans-serif;}
* { margin:0; padding:0; }
body, button, input, select, textarea { font-family: "\u5b8b\u4f53","Microsoft YaHei",Tahoma, "SimSun",12px\/1.5 tahoma,tahoma,arial ,5b8b4f53; color:#666;}
ul, ol { list-style:none; list-style-type:none }
select, input, img { vertical-align:middle; }
a:link, a:visited { text-decoration:none;color:#333;}
a:hover{color: #307F7A;text-decoration:underline;}
fieldset, img { border:0 none ; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; }
.clearfix { display: inline-block; } \/* Hides from IE-mac*\/
* html .clearfix { height: 1%; }<\/p>\n

em{
    font-style:normal;
}
div {display:block;}
.fl{
 float:left;
}
.fr{
 float:right;
}<\/p>\n

\/******\/
.w960-lw {
 width:960px;
 margin:0 auto; 
}<\/p>\n

.layout1_lw {
 background:url(http:\/\/mat1.gtimg.com\/edu\/2012\/tuipu15\/top.jpg<\/a>) 50% 0 no-repeat;
 height:785px;
 margin:0 auto;
}<\/p>\n

.nav_lw {
 position:relative;
 z-index:9;
}
.menu_lw {
 position:absolute;
 top:211px;
 left:-30px;
 float:left;
 -webkit-transform: rotate(-30deg);  
 -moz-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 \/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.7660444431189777);*\/
 
}\n<\/p>\n

.nav_lw  li {
 background:#479E13;
 float:left;
 width:104px;
 font-size:18px;
 font-weight:500;
 color:#fff;
 font-family:"Microsoft YaHei";
 text-align:center;
 \/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;*\/
}
#nav_lw  li{
 position:absolute 9; 
}
#nav_lw .n1 {
 top:186px 9;
 left:50px 9;
}
#nav_lw .n2 {
 top:135px 9;
 left:138px 9;
}
#nav_lw .n3 {
 top:83px 9;
 left:228px 9;
}
#nav_lw .n4 {
 top:31px 9;
 left:318px 9;
}
#nav_lw .n5 {
 top:-22px 9;
 left:410px 9;
}
#nav_lw .n6 {
 top:-74px 9;
 left:500px 9;
}
#nav_lw .n7 {
 top:-126px 9;
 left:590px 9;
}
#nav_lw .n8 {
 top:-178px 9;
 left:680px 9;
}
#nav_lw .n9{
 top:-230px 9;
 left:770px 9;
}<\/p>\n

.nav_lw  li a {
 background:#00aeef;
 color:#fff;
 display:block;
 width:104px;
 height:57px;
 line-height:58px;
 
}
.nav_lw  li a:hover{
 background:#39900B;
 text-decoration:underline;
 }
.nav_lw  li {
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) 9;
 
}\/*ie6-ie8  
  *Matrix \u6ee4\u955c\u5728\u65cb\u8f6c\u65b9\u9762\u9700\u8981\u7528\u5230 M11 M12 M21 M22 \u56db\u4e2a\u53c2\u6570\uff0c\u5206\u522b\u4ee3\u8868 cos(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001-sin(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001sin(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3001cos(\u65cb\u8f6c\u7684\u89d2\u5ea6)\u3002\u4f46\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f IE \u4e2d\u65cb\u8f6c\u7684\u4e2d\u5fc3\u70b9\u4f1a\u53d1\u751f\u53d8\u5316\u3002
*\/
<\/style><\/p>\n

<\/head>
<body><\/p>\n

 <\/p>\n

  <div class="layout layout1_lw">
    <div class="nav_lw w960-lw">
   <ul class="menu_lw clearfix" id="nav_lw">
  <li class="n1"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n2"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n4"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n3"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n5"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n6"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n7"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n8"><a href="#">\u6d88\u606f<\/a><\/li>
  <li class="n9"><a href="#">\u6d88\u606f<\/a><\/li>
   <\/ul>
 <\/div>
  
  <\/div>
  
  
<\/body>
<\/html><\/p>\n

 <\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

\uff08\u5f15\u7528QQ\u56fe\u7247\uff09 transform:rotate(-30deg);\/*\u517c\u5bb9\u6027\u5f3a*\/ -ms-tra […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-285","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":0,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}