5.11日音訊,IE10下CSS33Dtransfrom變換。令開發(fā)者關注和熱議的還是IE10能否更好地支持HTML5?因為早在IE10之前就有人這樣評論IE瀏覽器：IE瀏覽器是Web新技術(shù)發(fā)展道路上的絆腳石。IE6的輝煌時代已經(jīng)結(jié)束，IE7也是這樣，即便是IE8，也仍然不能稱為一款“現(xiàn)代瀏覽器”。而IE9對HTML5的支持尚不完全，比如不支持WebSockets和WebWorkers。要知道這兩項可是對HTML5來說是非常重要的新特性。
筆者個人認為IE10瀏覽器單從對HTML5支持來說，是微軟IE瀏覽器系列中具有里程碑意義的產(chǎn)品，筆者評測結(jié)果如下：
由以上評測結(jié)果可以看出IE10IE開發(fā)者中心給到了一份詳細的針對前端開發(fā)者的文檔，列出了IE10支持的HTML5和CSS3新特性。其中CSS3新特性包括：
cssregion
css3多列
Flexbox
grid
定位浮動(positionedfloat)
3D變換(3Dtransfrom)
動畫(animation)
漸變(gradient)
text-shadow
去掉樣式表限制——在IE9之前的版本中，每個頁面最多只能加載31個樣式表文件，@import也只能最多嵌套4層，IE10中去掉了這些限制。
因CSS3新特性眾多，今天筆者就IE10下CSS3的新特性做詳細介紹，并附上實例源碼，筆者也會抽更多的時間去總結(jié)CSS3的其他特性，并給出實例，希望各位愛好者一起探討、交流：
3D變換(3Dtransfrom)
在CSS3中，用Transform功能可以實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實現(xiàn)。將這四種變形結(jié)合使用，就會產(chǎn)生不同的效果，使用順序不同，產(chǎn)生的效果是不一樣的。
CSS中使用rotate方法來實現(xiàn)對元素的旋轉(zhuǎn)，在參數(shù)中加入角度值，旋轉(zhuǎn)方式為順時針旋轉(zhuǎn)。
使用格式:transform:rotate(45deg)deg是CSS3的“ValuesandUnits”模塊中定義的一個角度單位
1)旋轉(zhuǎn)：
rotate()方法
通過rotate()方法，元素順時針旋轉(zhuǎn)給定的角度。允許負值，元素將逆時針旋轉(zhuǎn)。
案例源代碼：
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
2)縮放：
scale()方法
通過scale()方法，元素的尺寸會增加或減少，根據(jù)給定的寬度（X軸）和高度（Y軸）
案例源代碼：
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
3)傾斜：
skew()方法
通過skew()方法，元素轉(zhuǎn)動給定的角度，根據(jù)給定的水平線（X軸）和垂直線（Y軸）
源代碼：
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
4)移動：
translate()方法
通過translate()方法，元素從其當前位置移動，根據(jù)給定的left（x坐標）和top（y坐標）
源代碼：
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
3D變換Perspective：
perspective變換函數(shù)對于3D變換來說至關重要。該函數(shù)會設置查看者的位置，并將可視內(nèi)容映射到一個視錐上，繼而投影到一個2D視平面上。如果不指定透視，則Z空間中的所有點將平鋪到同一個2D視平面中，并且變換結(jié)果中將不存在景深概念。對于某些變換，例如下圖顯示的沿Z軸的變換，perspective變換函數(shù)對于查看變換的效果來說必不可少。
源代碼：
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
5)動畫和過渡實現(xiàn)3D變換：
源代碼:
運行代碼復制代碼保存代碼提示：您可以先修改部分代碼再運行!powerbyW3Cfuns.com
效果:
文字漸漸離去效果
