欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中Transform動畫屬性用法詳解

  發(fā)布時間：2016-07-04 15:32:09   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了CSS3中Transform動畫屬性用法，教大家如何實(shí)現(xiàn)2D transform變換、3D transform變換，感興趣的小伙伴們可以參考一下

css3在原來的基礎(chǔ)上增加了變形和動畫相關(guān)的屬性，動畫三兄弟：transform、transition和animation，通過使用這三個屬性可以達(dá)到很炫酷的效果。需要注意的是這三個屬性都是css3新增的屬性，各大瀏覽器支持方面還不是特別好，使用時要特別注意瀏覽器的兼容性，本文重點(diǎn)介紹Transform的使用方法，具體內(nèi)容如下

瀏覽器支持情況：

Internet Explorer 10、Firefox、Opera 支持 transform 屬性。

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。

Opera 只支持 2D 轉(zhuǎn)換。

2D transform變換方法

•translate(x, y)方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。x, y的值可以取正負(fù)，分別表示表示向不同的方向偏移。
 •rotate(angle)方法， 表示旋轉(zhuǎn)angle角度。angle為正時，按順時針角度旋轉(zhuǎn)，為負(fù)值時，元素逆時針旋轉(zhuǎn)。
 •scale(x, y)方法，表示元素在x軸和y軸上的縮放比例，參數(shù)大于1時，元素放大，小于1時，元素縮小。
 •skew(x-angle,y-angle)方法，用來對元素進(jìn)行扭曲變行，第一個參數(shù)是水平方向扭曲角度，第二個參數(shù)是垂直方向扭曲角度。其中第二個參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個參數(shù)，那么Y軸為0deg
 •matrix(n,n,n,n,n,n)方法， 以一個含六值的變換矩陣的形式指定一個2D變換，此屬性值使用涉及到數(shù)學(xué)中的矩陣，感興趣的讀者可以深入了解一下，這里就不做詳細(xì)介紹了。
 
下面是上面方法的演示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform 2D演示</title>  
  6.     <style type="text/css">  
  7.         #container{   
  8.             width: 700px;    
  9.             height: 120px;    
  10.             border: 1px solid blue;    
  11.             margin: 20px auto;    
  12.             padding: 20px 20px;   
  13.         }   
  14.         #div1 ,#div2, #div3, #div4{   
  15.             height: 100px;    
  16.             width: 100px;    
  17.             border: 1px dashed red;   
  18.             display: inline-block;   
  19.         }   
  20.         #div1 div{   
  21.             height: 100px;   
  22.             width: 100px;    
  23.             background: #63F7ED;    
  24.             transform:translate(20px,10px);         /* W3C標(biāo)準(zhǔn) */   
  25.             -ms-transform:translate(20px,10px);     /* IE 9 */   
  26.             -moz-transform:translate(20px,10px);    /* Firefox */   
  27.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
  28.             -o-transform:translate(20px,10px);      /* Opera */   
  29.         }   
  30.         #div2{margin-left: 50px;}   
  31.         #div2 div{   
  32.             height: 100px;   
  33.             width: 100px;    
  34.             background: #63F7ED;   
  35.             transform:rotate(45deg);        /* W3C標(biāo)準(zhǔn) */   
  36.             -ms-transform:rotate(45deg);    /* IE 9 */   
  37.             -moz-transform:rotate(45deg);   /* Firefox */   
  38.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
  39.             -o-transform:rotate(45deg);         /* Opera */   
  40.         }   
  41.         #div3{margin-left: 100px;}   
  42.         #div3 div{   
  43.             height: 100px;   
  44.             width: 100px;    
  45.             background: #63F7ED;   
  46.             transform:scale(2,0.5);         /* W3C標(biāo)準(zhǔn) */   
  47.             -ms-transform:scale(2,0.5);     /* IE 9 */   
  48.             -moz-transform:scale(2,0.5);    /* Firefox */   
  49.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
  50.             -o-transform:scale(2,0.5);      /* Opera */   
  51.         }   
  52.         #div4{margin-left: 100px;}   
  53.         #div4 div{   
  54.             height: 100px;   
  55.             width: 100px;    
  56.             background: #63F7ED;   
  57.             transform:skew(30deg,-20deg);       /* W3C標(biāo)準(zhǔn) */   
  58.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
  59.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
  60.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
  61.             -o-transform:skew(30deg,-20deg);        /* Opera */   
  62.         }   
  63.   
  64.     </style>  
  65. </head>  
  66. <body>  
  67. <div id="container">  
  68.     <div id="div1">  
  69.         <div>translate</div>  
  70.     </div>  
  71.     <div id="div2">  
  72.         <div>rotate</div>  
  73.     </div>  
  74.     <div id="div3">  
  75.         <div>scale</div>  
  76.     </div>  
  77.     <div id="div4">  
  78.         <div>skew</div>  
  79.     </div>  
  80. </div>     
  81. </body>  
  82. </html>  
  83.   

效果如下：

transform-origin 屬性

前面我們提到的transform的方法都是基于元素的中心來變換的，也就是元素變換的基點(diǎn)默認(rèn)是元素的中心。但是有時候我們需要在不同的位置對元素進(jìn)行這些操作，那么我們就可以使用transform-origin來對元素進(jìn)行基點(diǎn)位置改變。該屬性可以接收三個參數(shù)：

transform-origin: x-axis y-axis z-axis;
 •x-axis，表示水平方向上的取值，可以取 字符參數(shù)值left,center right，也可以取百分比，字符參數(shù)值對應(yīng)的百分值為left=0%;center=50%;right=100%。
 •y-axis，表示豎直方向上的取值，還可以設(shè)置字符值top,center,bottom，也可以取百分比，字符參數(shù)值對應(yīng)的百分值為top=0%;center=50%;bottom=100%。
 •z-axis，表示視圖被置于 Z 軸的何處，用于3D變形中。
 
我們可以設(shè)置基點(diǎn)來與之前的transform圖形進(jìn)行對比：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform-origin演示</title>  
  6.     <style type="text/css">  
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.         }   
  11.         #container{   
  12.             width: 800px;    
  13.             height: 150px;    
  14.             border: 1px solid blue;    
  15.             margin: 20px auto;    
  16.             padding: 20px 20px;   
  17.         }   
  18.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }   
  24.         #div1 div{   
  25.             height: 100px;   
  26.             width: 100px;    
  27.             background: #63F7ED;    
  28.             transform:translate(20px,10px);         /* W3C標(biāo)準(zhǔn) */   
  29.             -ms-transform:translate(20px,10px);     /* IE 9 */   
  30.             -moz-transform:translate(20px,10px);    /* Firefox */   
  31.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
  32.             -o-transform:translate(20px,10px);      /* Opera */   
  33.             transform-origin:left top;          /* W3C標(biāo)準(zhǔn) */   
  34.             -ms-transform-origin:left top;  /* IE 9 */   
  35.             -moz-transform-origin:left top; /* Firefox */   
  36.             -webkit-transform-origin:left top; /* Safari 和 Chrome */   
  37.             -o-transform-origin:left top;       /* Opera */   
  38.         }   
  39.         #div2{margin-left: 100px;}   
  40.         #div2 div{   
  41.             height: 100px;   
  42.             width: 100px;    
  43.             background: #63F7ED;   
  44.             transform:rotate(45deg);        /* W3C標(biāo)準(zhǔn) */   
  45.             -ms-transform:rotate(45deg);    /* IE 9 */   
  46.             -moz-transform:rotate(45deg);   /* Firefox */   
  47.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
  48.             -o-transform:rotate(45deg);         /* Opera */   
  49.             transform-origin:0% 0%;         /* W3C標(biāo)準(zhǔn) */   
  50.             -ms-transform-origin:0% 0%;     /* IE 9 */   
  51.             -moz-transform-origin:0% 0%;    /* Firefox */   
  52.             -webkit-transform-origin:0% 0%;  /*Safari 和 Chrome */   
  53.             -o-transform-origin:0% 0%;      /* Opera */   
  54.         }   
  55.         #div3{margin-left: 50px;}   
  56.         #div3 div{   
  57.             height: 100px;   
  58.             width: 100px;    
  59.             background: #63F7ED;   
  60.             transform:scale(2,0.5);         /* W3C標(biāo)準(zhǔn) */   
  61.             -ms-transform:scale(2,0.5);     /* IE 9 */   
  62.             -moz-transform:scale(2,0.5);    /* Firefox */   
  63.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
  64.             -o-transform:scale(2,0.5);      /* Opera */   
  65.             transform-origin:center top;        /* W3C標(biāo)準(zhǔn) */   
  66.             -ms-transform-origin:center top;    /* IE 9 */   
  67.             -moz-transform-origin:center top;   /* Firefox */   
  68.             -webkit-transform-origin:center top; /* Safari 和 Chrome */   
  69.             -o-transform-origin:center top;        
  70.         }   
  71.         #div4{margin-left: 150px;}   
  72.         #div4 div{   
  73.             height: 100px;   
  74.             width: 100px;    
  75.             background: #63F7ED;   
  76.             transform:skew(30deg,-20deg);       /* W3C標(biāo)準(zhǔn) */   
  77.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
  78.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
  79.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
  80.             -o-transform:skew(30deg,-20deg);        /* Opera */   
  81.             transform-origin:100% 100%;         /* W3C標(biāo)準(zhǔn) */   
  82.             -ms-transform-origin:100% 100%;     /* IE 9 */   
  83.             -moz-transform-origin:100% 100%;    /* Firefox */   
  84.             -webkit-transform-origin:100% 100%; /* Safari 和 Chrome */   
  85.             -o-transform-origin:100% 100%;    
  86.         }   
  87.   
  88.     </style>  
  89. </head>  
  90. <body>  
  91. <div id="container">  
  92.     <div id="div1">  
  93.         <div>translate(基點(diǎn)為(left top)</div>  
  94.     </div>  
  95.     <div id="div2">  
  96.         <div>rotate(基點(diǎn)為(0%, 0%)</div>  
  97.     </div>  
  98.     <div id="div3">  
  99.         <div>scale(基點(diǎn)為(center, top)</div>  
  100.     </div>  
  101.     <div id="div4">  
  102.         <div>skew(基點(diǎn)為(100%, 100%)</div>  
  103.     </div>  
  104. </div>     
  105. </body>  
  106. </html>  
  107.   

效果如下：

對比發(fā)現(xiàn)：translate()方法與之前的沒有區(qū)別，其他三個方法基點(diǎn)改變了，圖形變形效果也有所變化。

3D transform變換方法

Internet Explorer 10 和 Firefox 支持 3D 轉(zhuǎn)換.
Chrome 和 Safari 必須添加前綴 -webkit-.
Opera 還不支持 3D 轉(zhuǎn)換(支持 2D 轉(zhuǎn)換 ).

三維變換使用基于二維變換的相同屬性。CSS3中的3D變換主要包括以下幾種功能函數(shù)：
 •3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數(shù)；
 •3D旋轉(zhuǎn)：CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數(shù)；
 •3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數(shù)；
 •3D矩陣：CSS3中3D變形中和2D變形一樣也有一個3D矩陣功能函數(shù)matrix3d()。
 
還有以下幾個轉(zhuǎn)換屬性：
 •transform-style： 規(guī)定被嵌套元素如何在 3D 空間中顯示。
 •perspective： 規(guī)定 3D 元素的透視效果。
 •perspective-origin： 規(guī)定 3D 元素的底部位置。
 •backface-visibility： 定義元素在不面對屏幕時是否可見。
 
目前各大主流瀏覽器對transform 3d屬性的兼容性還不是特別好，感興趣的讀者可以自行深入了解。下面我們介紹幾個常用的功能方法：

rotateX()方法，圍繞其在一個給定度數(shù)X軸旋轉(zhuǎn)的元素；
rotateY()方法，圍繞其在一個給定度數(shù)Y軸旋轉(zhuǎn)的元素；
rotateZ()方法，圍繞其在一個給定度數(shù)Z軸旋轉(zhuǎn)的元素。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>transform 3d </title>   
  6.     <style type="text/css">   
  7.         *{   
  8.             margin: 0;   
  9.             padding: 0;   
  10.         }  
  11.         #container{   
  12.             width: 440px;    
  13.             height: 120px;    
  14.             border: 1px solid blue;    
  15.             margin: 20px auto;    
  16.             padding: 20px 20px;   
  17.         }  
  18.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }  
  24.         #div1 div{   
  25.             height: 100px;   
  26.             width: 100px;    
  27.             background: #63F7ED;    
  28.             transform:rotateX(45deg);       /* W3C標(biāo)準(zhǔn) */  
  29.             -webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */  
  30.         }  
  31.         #div2{margin-left: 50px;}  
  32.         #div2 div{   
  33.             height: 100px;   
  34.             width: 100px;    
  35.             background: #63F7ED;    
  36.             transform:rotateY(45deg);       /* W3C標(biāo)準(zhǔn) */  
  37.             -webkit-transform:rotateY(45deg)); /* Safari 和 Chrome */  
  38.         }  
  39.         #div3{margin-left: 50px;}  
  40.         #div3 div{   
  41.             height: 100px;   
  42.             width: 100px;    
  43.             background: #63F7ED;    
  44.             transform:rotateZ(45deg);       /* W3C標(biāo)準(zhǔn) */  
  45.             -webkit-transform:rotateZ(45deg)); /* Safari 和 Chrome */  
  46.         }   
  47.   
  48.     </style>   
  49. </head>   
  50. <body>   
  51.     <div id="container">   
  52.         <div id="div1">   
  53.             <div>rotateX(45deg)</div>   
  54.         </div>   
  55.         <div id="div2">   
  56.             <div>rotateY(45deg)</div>   
  57.         </div>   
  58.         <div id="div3">   
  59.             <div>rotateZ(45deg)</div>   
  60.         </div>   
  61.     </div>     
  62. </body>   
  63. </html>   
  64.   

下面是顯示效果：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論