詳解IE10 下CSS3 3D變換(3D transfrom)及實例教程,本文章所有實例均可無需修改,直接運行.
自2011年4月，微軟在其召開的MIX11技術大會上發佈了IE10瀏覽器的首個平臺預覽版，並宣佈面向公衆開放免費下載,並隨後陸續發佈了一系列的預覽版，IE10在硬件加速、數據處理速度、網站頁面打開速度上都有了提升，在頁面處理和視覺處理功能上也進行了加強。
但令開發者關注和熱議的還是IE10能否更好地支持HTML5? 因爲早在IE10之前就有人這樣評論IE瀏覽器：IE瀏覽器是Web新技術發展道路上的絆腳石。IE6的輝煌時代已經結束，IE7也是這樣，即便是IE8，也仍然不能稱爲一款“現代瀏覽器”。而IE9對HTML5的支持尚不完全，比如不支持Web Sockets和Web Workers。要知道這兩項可是對HTML5來說是非常重要的新特性。
筆者個人認爲IE10瀏覽器單從對HTML5支持來說，是微軟IE瀏覽器系列中具有里程碑意義的產品，筆者評測結果如下：
由以上評測結果可以看出IE10IE開發者中心給到了一份詳細的針對前端開發者的文檔，列出了IE10支持的HTML5和CSS3新特性。(http://msdn.microsoft.com/en-us/ie/gg192966)
,其中CSS3新特性包括：
CSS3
· css region
· css3多列
· Flexbox
· grid
· 定位浮動(positioned float)
· 3D變換(3D transfrom)
· 動畫(animation)
· 漸變(gradient)
· text-shadow
· 去掉樣式表限制——在IE9之前的版本中，每個頁面最多隻能加載31個樣式表文件，@import也只能最多嵌套4層，IE10中去掉了這些限制。
因CSS3新特性衆多，今天筆者就IE10下CSS3的新特性做詳細介紹，並附上實例源碼，筆者也會抽更多的時間去總結CSS3的其他特性，並給出實例，希望各位愛好者一起探討、交流：
· 3D變換(3D transfrom)
在CSS3中，用Transform功能可以實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形，這四種變形分別使用rotate、scale、skew和translate這四種方法來實現。將這四種變形結合使用，就會產生不同的效果，使用順序不同，產生的效果是不一樣的。
CSS中使用rotate方法來實現對元素的旋轉，在參數中加入角度值，旋轉方式爲順時針旋轉。
使用格式: transform: rotate(45deg) deg是CSS3的“Values and Units”模塊中定義的一個角度單位
1)旋轉：
rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
案例源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE10下CSS3新特性之3D變換(3D transfrom)應用實例-liwei3gjob</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: rotate(45deg); /* for Chrome || Safari */
-moz-transform: rotate(45deg); /* for Firefox */
-ms-transform: rotate(45deg); /* for IE 旋轉45度*/
-o-transform: rotate(45deg); /* for Opera */
}
</style>
</head>
<body>
<div>IE10下CSS3新特性之3D變換(3D transfrom)應用實例-liwei3gjob</div>
</body>
</html>
效果:
2)縮放：
scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）
案例源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE10下CSS3新特性之3D變換(3D transfrom)應用實例-liwei3gjob</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: scale(0.5); /* for Chrome || Safari */
-moz-transform: scale(0.5); /* for Firefox */
-ms-transform: scale(0.5); /* for IE 縮放0.5 */
-o-transform: scale(0.5); /* for Opera */
}
</style>
</head>
<body>
<div>IE10下CSS3新特性之3D變換(3D transfrom)應用實例-liwei3gjob</div>
</body>
</html>
效果:
3)傾斜：
skew() 方法
通過 skew() 方法，元素轉動給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: skew(30deg, 30deg); /* for Chrome || Safari */
-moz-transform: skew(30deg, 30deg); /* for Firefox */
-ms-transform: skew(30deg, 30deg); /* for IE */
-o-transform: skew(30deg, 30deg); /* for Opera */
}
</style>
</head>
<body>
<div>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob</div>
</body>
</html>
效果:
4)移動：
translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標）
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: translate(50px, 50px); /* for Chrome || Safari */
-moz-transform: translate(50px, 50px); /* for Firefox */
-ms-transform: translate(50px, 50px); /* for IE 值 translate(50px,50px) 把元素從左側移動 50 像素，從頂端移動 100 像素。
*/
-o-transform: translate(50px, 50px); /* for Opera */
}
</style>
</head>
<body>
<div>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob</div>
</body>
</html>
效果:
3D變換Perspective：
perspective 變換函數對於 3D 變換來說至關重要。該函數會設置查看者的位置，並將可視內容映射到一個視錐上，繼而投影到一個 2D 視平面上。如果不指定透視，則 Z 空間中的所有點將平鋪到同一個 2D 視平面中，並且變換結果中將不存在景深概念。對於某些變換，例如下圖顯示的沿 Z 軸的變換，perspective 變換函數對於查看變換的效果來說必不可少。
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob</title>
<style>
div {
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
-webkit-transform: perspective(500px) rotateY(40deg); /* for Chrome || Safari */
-moz-transform: perspective(500px) rotateY(40deg); /* for Firefox */
-ms-transform: perspective(500px) rotateY(40deg); /* for IE 縮放0.5 */
-o-transform: perspective(500px) rotateY(40deg); /* for Opera */
}
</style>
</head>
<body>
<div>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob</div>
</body>
</html>
效果:
5)動畫和過渡實現3D變換：
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob</title>
<style>
#div1 {
transform-origin: 150px 500px;
animation: scrollText 200s linear infinite;
}
#parentDiv {
perspective: 500px;
perspective-origin: 150px 500px;
}
@keyframes scrollText {
0% { transform: rotateX(45deg) translateY(500px); }
100% { transform: rotateX(45deg) translateY(-9000px); }
}
</style>
</head>
<body>
<div id="parentDiv"><div id="div1">詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br>
詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br>
詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br>
詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br>
詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br>
詳解IE10下CSS3 3D變換(3D transfrom)及實例教程-liwei3gjob-liwei3gjob<br></div></div>
</body>
</html>
效果:
文字漸漸離去效果
以上是筆者對IE10下CSS3 3D變換(3D transfrom)及實例教程,後續還會抽空整理IE10下更多CSS3新特性的文章，敬請關注,文章原創，轉載請註明出處！。
