transform屬性介紹，css3中的transform屬性詳解

閱讀量： 71 發(fā)布日期： 2022-11-03 08:36:39

CSS3的transform屬性可以用來(lái)對(duì)元素進(jìn)行平移、旋轉(zhuǎn)、縮放等操作，這樣就可以很方便的實(shí)現(xiàn)多種效果。本文將為大家介紹transform屬性的基本用法。

1、css3 transform屬性

CSS3的transform屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜或移動(dòng)。除此之外，還可以使用matrix()方法對(duì)元素進(jìn)行變形。其中，transform-origin屬性規(guī)定了被變形元素的中心位置。transform屬性是一個(gè)組合屬性，因此我們可以將多個(gè)變形添加到元素中。語(yǔ)法：

2、transform的基本使用

transform屬性允許你對(duì)元素進(jìn)行變形，包括旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。這個(gè)屬性允許你使用2D或3D轉(zhuǎn)換來(lái)對(duì)元素進(jìn)行變形。要使用transform屬性，你需要在元素上指定一個(gè)變形方法（transform method）。有幾種變形方法可以使用，包括rotate()（旋轉(zhuǎn)）、scale()（縮放）、translate()（移動(dòng)）、skew()（傾斜）和matrix()（使用矩陣來(lái)變換元素）。下面的例子將旋轉(zhuǎn)元素45度：

3、旋轉(zhuǎn)

CSS3的transform屬性允許你對(duì)元素進(jìn)行各種變形操作，包括旋轉(zhuǎn)、縮放、傾斜或者移動(dòng)元素。通常我們使用transform來(lái)實(shí)現(xiàn)圖片翻轉(zhuǎn)和旋轉(zhuǎn)的效果，那么transform屬性到底有哪些？下面就讓我們一起來(lái)看看吧。transform屬性包含了這些值：rotate：旋轉(zhuǎn)scale：縮放skew：傾斜translate：移動(dòng)

1）HTML代碼：

<p></p>

2）CSS代碼：

p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(45deg);/*IE9*/    
    -moz-transform:rotate(45deg);/*Firefox*/ 
    -webkit-transform:rotate(45deg);/*Safari和chrome*/ 
    -o-transform:rotate(45deg);/*Opera*/ 
}

4、翻轉(zhuǎn)

這是文章第4段，主要介紹transform屬性的翻轉(zhuǎn)。翻轉(zhuǎn)是指對(duì)元素進(jìn)行翻轉(zhuǎn)操作。翻轉(zhuǎn)操作可以沿著X軸、Y軸和Z軸進(jìn)行。首先，我們來(lái)看看沿著X軸的翻轉(zhuǎn)。要想實(shí)現(xiàn)沿著X軸的翻轉(zhuǎn)，我們需要使用rotateX()方法。該方法接收一個(gè)度數(shù)值，表示元素翻轉(zhuǎn)的角度。下面是一個(gè)例子：

1）HTML代碼：

<p class="main">  
    <p class="p"></p>  
</p>

2）CSS代碼：

.main{  
    width: 100%;  
    height: 500px;  
    background-color: lightcoral;  
    margin-left: 140px;  
    margin-top: 180px;  
}  
.p{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(30deg);/*IE9*/    
    -moz-transform:rotate(30deg);/*Firefox*/ 
    -webkit-transform:rotate(30deg);/*Safari和chrome*/ 
    -o-transform:rotate(30deg);/*Opera*/ 
       
    transform-origin: center;  
    /*transform-origin: top;*/ 
    /*transform-origin: top left;*/ 
    /*transform-origin: right top;*/ 
    /*transform-origin: left;*/ 
    /*transform-origin: right;*/ 
    /*transform-origin: bottom left;*/ 
    /*transform-origin: bottom;*/ 
    /*transform-origin: bottom right;*/  
}