CSS3中使用translate() 方法实现元素位置的移动

93 阅读 0 评论 62 点赞

我是靠谱客的博主感动航空，最近开发中收集的这篇文章主要介绍CSS3中使用translate() 方法实现元素位置的移动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

实例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

实例：

 
       <!DOCTYPE html> 
      
       <html> 
      
       <head> 
      
       <style>  
      
       div 
      
       { 
      
       width 
       : 
       100px 
       ; 
      
       height 
       : 
       75px 
       ; 
      
       background-color 
       :yellow; 
      
       border 
       : 
       1px  
       solid  
       black 
       ; 
      
       } 
      
       div#div 
       2 
      
       { 
      
       transform:translate( 
       50px 
       , 
       100px 
       ); 
      
       -ms-transform:translate( 
       50px 
       , 
       100px 
       );  
       /* IE 9 */ 
      
       -moz-transform:translate( 
       50px 
       , 
       100px 
       );  
       /* Firefox */ 
      
       -webkit-transform:translate( 
       50px 
       , 
       100px 
       );  
       /* Safari and Chrome */ 
      
       -o-transform:translate( 
       50px 
       , 
       100px 
       );  
       /* Opera */ 
      
       } 
      
       </style> 
      
       </head> 
      
       <body> 
      
       <div>你好。这是一个 div 元素。</div> 
      
       <div id= 
       "div2" 
       >你好。这是一个 div 元素。</div> 
      
       </body> 
      
       </html>