當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

043_CSS32D转换

發(fā)布時(shí)間：2025/4/17 CSS 79 豆豆

生活随笔收集整理的這篇文章主要介紹了 043_CSS32D转换小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 通過(guò)CSS3的transform屬性像元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行移動(dòng)、縮放、旋轉(zhuǎn)、傾斜。

2. Transform 2D方法

3. translate(x,y)、translateX(x)、translateY(y)方法

3.1. translate(x,y)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著X和Y軸移動(dòng)元素。

3.2. translateX(x)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著X軸移動(dòng)元素。

3.3. translateY(y)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著Y軸移動(dòng)元素。

3.4. 例子

3.4.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 2D移動(dòng)</title><meta charset="utf-8" /><style type="text/css">#translate img:hover {transform: translate(50px, 20px);}#translateX img:hover {transform: translateX(50px);}#translateY img:hover {transform: translateY(20px);}</style></head><body><div id="translate"><p>translate(x,y)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著X和Y軸移動(dòng)元素。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="translateX"><p>translateX(x)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著X軸移動(dòng)元素。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="translateY"><p>translateY(y)定義2D轉(zhuǎn)換, 從當(dāng)前位置沿著Y軸移動(dòng)元素。</p><img src="flower.jpg" alt="flower.jpg" /></div></body> </html>

3.4.2. 效果圖

4. rotate(angle)方法

4.1. rotate(angle)根據(jù)給定的角度順時(shí)針或逆時(shí)針旋轉(zhuǎn)元素。使用正值將順時(shí)針旋轉(zhuǎn)元素。使用負(fù)值將逆時(shí)針旋轉(zhuǎn)元素。

4.2. 例子

4.2.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 2D旋轉(zhuǎn)</title><meta charset="utf-8" /><style type="text/css">div {margin-left: 30px;}#rotateClockwise img:hover {transform: rotate(30deg);}#rotateAnticlockwise img:hover {transform: rotate(-30deg);}</style></head><body><div id="rotateClockwise"><p>rotate(angle)使用正值將順時(shí)針旋轉(zhuǎn)元素。</p><img src="flower.jpg" alt="flower.jpg" /> </div><div id="rotateAnticlockwise"><p>rotate(angle)使用負(fù)值將逆時(shí)針旋轉(zhuǎn)元素。</p><img src="flower.jpg" alt="flower.jpg" /> </div></body> </html>

4.2.2. 效果圖

5. scale(x,y)、scaleX(x)、scaleY(y)方法

5.1. scale(x,y)定義2D縮放轉(zhuǎn)換, 改變?cè)氐膶挾群透叨取ＴO(shè)置元素寬度為其原始寬度的x倍, 同時(shí)設(shè)置元素高度為其原始高度的y倍。

5.2. scaleX(x)定義2D縮放轉(zhuǎn)換, 改變?cè)氐膶挾取ＴO(shè)置元素寬度為其原始寬度的x倍。

5.3. scaleY(y)定義2D縮放轉(zhuǎn)換, 改變?cè)氐母叨取ＴO(shè)置元素高度為其原始高度的y倍。

5.4. 例子

5.4.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 2D縮放</title><meta charset="utf-8" /><style type="text/css">div {margin-left: 100px;}#scale img:hover {transform: scale(2,2);}#scaleX img:nth-child(2):hover {transform: scaleX(2);}#scaleX img:last-child:hover {transform: scaleX(-1);}#scaleY img:nth-child(2):hover {transform: scaleY(2);}#scaleY img:last-child:hover {transform: scaleY(-1);}</style></head><body><div id="scaleX"><p>scaleX(x)定義2D縮放轉(zhuǎn)換, 改變?cè)氐膶挾取ＴO(shè)置元素寬度為其原始寬度的x倍。</p><img src="flower.jpg" alt="flower.jpg" /> <img src="flower.jpg" alt="flower.jpg" /></div><div id="scaleY" style="margin-top: 50px; margin-bottom: 50px;"><p>scaleY(y)定義2D縮放轉(zhuǎn)換, 改變?cè)氐母叨取ＴO(shè)置元素高度為其原始高度的y倍。</p><img src="flower.jpg" alt="flower.jpg" /> <img src="flower.jpg" alt="flower.jpg" /></div><div id="scale"><p>scale(x,y)定義2D縮放轉(zhuǎn)換, 改變?cè)氐膶挾群透叨取ＴO(shè)置元素寬度為其原始寬度的x倍, 同時(shí)設(shè)置元素高度為其原始高度的y倍。</p><img src="flower.jpg" alt="flower.jpg" /></div></body> </html>

5.4.2. 效果圖

6. skew(x-angle,y-angle)、skewX(angle)、skewY(angle)方法

6.1. skew(x-angle,y-angle)定義2D傾斜轉(zhuǎn)換, 使元素沿X和Y軸傾斜給定角度。如果未指定第二個(gè)參數(shù), 則值為零。

6.2. skewX(angle)定義2D傾斜轉(zhuǎn)換, 使元素沿X軸傾斜給定角度。

6.3. skewY(angle)定義2D傾斜轉(zhuǎn)換, 使元素沿Y軸傾斜給定角度。

6.4. 例子

6.4.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 2D傾斜</title><meta charset="utf-8" /><style type="text/css">div {margin: 20px 60px;}#skew img:hover {transform: skew(30deg,20deg);}#skewX img:hover {transform: skewX(30deg);}#skewY img:hover {transform: skewY(20deg);}</style></head><body><div id="skew"><p>skew(x-angle,y-angle)定義2D傾斜轉(zhuǎn)換, 使元素沿X和Y軸傾斜給定角度。如果未指定第二個(gè)參數(shù), 則值為零。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="skewX"><p>skewX(angle)定義2D傾斜轉(zhuǎn)換, 使元素沿X軸傾斜給定角度。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="skewY"><p>skewY(angle)定義2D傾斜轉(zhuǎn)換, 使元素沿Y軸傾斜給定角度。</p><img src="flower.jpg" alt="flower.jpg" /></div></body> </html>

6.4.2. 效果圖

7. matrix(n,n,n,n,n,n)方法

7.1. matrix()方法把所有2D變換方法組合為一個(gè)。

7.2. matrix()方法可接受六個(gè)參數(shù), 其中包括數(shù)學(xué)函數(shù), 這些參數(shù)使您可以旋轉(zhuǎn)、縮放、移動(dòng)(平移)和傾斜元素。參數(shù)如下: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

7.3. 例子

7.3.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3 2D變換方法組合</title><meta charset="utf-8" /><style type="text/css">div {background: #FFF0F0;height: 200px;width: 800px;}img {margin-left: 100px;}#matrix img {transform: matrix(1, 0, 0.6, 1, 0, 0);}</style></head><body><div><p>原始圖片:</p><img src="flower.jpg" alt="flower.jpg" /> </div><div id="matrix"><p>參數(shù)如下: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())</p><img src="flower.jpg" alt="flower.jpg" /> </div></body> </html>

7.3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的043_CSS32D转换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

_CSS32D