CSS3 transform、translate 2D 转换的使用

刺骨的言语ヽ痛彻心扉 2023-08-17 17:42 131阅读 0赞

`transform` 属性用于设置元素的 2D 或 3D 转换；通过这个属性可以对元素进行旋转，缩放，移动，倾斜等操作

2D 转换中的**移动**是 2D 转换中的一种功能，可用来改变元素在页面中的位置，与定位很类似

<table> 
 <thead> 
  <tr> 
   <th align="center">属性值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">none</td> 
   <td align="center">不进行转换</td> 
  </tr> 
  <tr> 
   <td align="center">translate(x, y)</td> 
   <td align="center">设置为 2D 转换</td> 
  </tr> 
  <tr> 
   <td align="center">translateX(x)</td> 
   <td align="center">只设置 x 轴的转换</td> 
  </tr> 
  <tr> 
   <td align="center">translateY(y)</td> 
   <td align="center">只设置 y 轴的转换</td> 
  </tr> 
 </tbody> 
</table>

示例：

* { 
    	padding: 0;
    	margin: 0;
    }
    
    /*清除浮动*/
    .clearfix:before, .clearfix:after{ 
    	content: "";
    	display: table;
    }
    .clearfix:after{ 
    	clear: both;
    }
    .clearfix{ 
    	*zoom: 1;
    }
    
    /* 设置 ul */
    ul { 
    	width: 624px;
    	margin: 5px 0 0 10px;
    	padding: 10px;
    	padding-bottom: 0;
    	border: 1px solid gray;
    }
    
    /* 设置 li */
    ul li { 
    	float: left;
    	list-style: none;
    	border: 1px solid #000;
    	margin-bottom: 20px;
    }
    
    ul li:nth-child(2n-1){ 
    	margin-right: 20px;	
    }
    /* 设置 p 标签 */
    ul li>p { 
    	width: 300px;
    	height: 100px;
    	background-color: #ccc;
    }
    
    ul li .translate { 
    	transform: translate(-10px, 10px);
    }
    
    ul li .translate2 { 
    	transform: translate(50%, 50%);
    }
    
    ul li .translate3 { 
    	transform: translate(10px, 0);
    }
    
    ul li .translateX { 
    	transform: translateX(10px);
    }
    
    ul li .translateY { 
    	transform: translateY(-10px);
    }

<ul class="clearfix">
    	<li>
    		<p class="translate">transform: translate(-10px, 10px);</p>
    	</li>
    	<li>
    		<p class="translate2">transform: translate(50%, 50%);</p>
    	</li>
    	<li>
    		<p class="translate3">transform: translate(10px, 0);</p>
    	</li>
    	<li>
    		<p class="translateX">transform: translateX(10px);</p>
    	</li>
    	<li>
    		<p class="translateY">transform: translateY(-10px);</p>
    	</li>
    </ul>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

`translate` 有个非常大的优点，使用 translate 并不会影响其他元素的位置；其属性值可以是具像素（px）也可以是百分比（%），需要注意的是在使用 %（百分比） 时是相对于自身的宽高来计算的；另外 translate 对行内元素没有作用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230808/d1ac4f27669e4e8a80e548542ef2b916.png