VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • css教程之matrix() [矩阵变形]

语法

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
语法项目 说明
初始值 none
适用于 块元素和行内元素
可否继承 否
媒介 视觉
版本 CSS3.0

说明

matrix()是矩阵函数，以一个含六值的(a,c,e,b,d,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a c e b d f]变换矩阵。

注意：c,e的值用正弦或余弦值表示

IE虽然不支持大部分的CSS3变形，但是支持matrix滤镜。

取值

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

该函数包括6个参数(a,c,e,b,d,f)，实际上它是一个3*3的矩阵:

2016-03-27_190000.jpg

  • 参数详解：
  • a表示scaleX();
  • c表示skewY();
  • e表示skewX();
  • b表示scaleY();
  • d表示translateX();
  • f表示translateY();

实例代码

CSS 

				
    
					
  1. 
						.matrix{
    2. 
					
  2. 
						    -webkit-transform:matrix(1,0.4,0,1,0,0);
    3. 
					
  3. 
						    -moz-transform:matrix(1,0.4,0,1,0,0);
    4. 
					
  4. 
						    position:absolute;
    5. 
					
  5. 
						    left:200px;
    6. 
					
  6. 
						    top:50px;
    7. 
					
  7. 
						}
    8. 
				

				

					复制

			

			

				HTML
				

				
    
					
  1. 
						<div class="demo_box matrix">复杂的矩阵变形</div>
    2. 
				

				

					复制

			

			运行一下 »

	





	

		

			兼容性

		

			

				
					

						
							IE
						
							Firefox
						
							Opera
						
							Safari
						
							Chrome
					

				
				
					

						
							IE 10+
						
							Firefox 3.5+
						
							Opera 11.50+
						
							Safari 10+
						
							Chrome 2.0+
					

				
			

		

	






      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程