043_CSS32D转换
1. 通過CSS3的transform屬性像元素應用2D或3D轉(zhuǎn)換。該屬性允許我們對元素進行移動、縮放、旋轉(zhuǎn)、傾斜。
2. Transform 2D方法
3. translate(x,y)、translateX(x)、translateY(y)方法
3.1. translate(x,y)定義2D轉(zhuǎn)換, 從當前位置沿著X和Y軸移動元素。
3.2. translateX(x)定義2D轉(zhuǎn)換, 從當前位置沿著X軸移動元素。
3.3. translateY(y)定義2D轉(zhuǎn)換, 從當前位置沿著Y軸移動元素。
3.4. 例子
3.4.1. 代碼
<!DOCTYPE html> <html><head><title>CSS3 2D移動</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)換, 從當前位置沿著X和Y軸移動元素。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="translateX"><p>translateX(x)定義2D轉(zhuǎn)換, 從當前位置沿著X軸移動元素。</p><img src="flower.jpg" alt="flower.jpg" /></div><div id="translateY"><p>translateY(y)定義2D轉(zhuǎn)換, 從當前位置沿著Y軸移動元素。</p><img src="flower.jpg" alt="flower.jpg" /></div></body> </html>3.4.2. 效果圖
4. rotate(angle)方法
4.1. rotate(angle)根據(jù)給定的角度順時針或逆時針旋轉(zhuǎn)元素。使用正值將順時針旋轉(zhuǎn)元素。使用負值將逆時針旋轉(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)使用正值將順時針旋轉(zhuǎn)元素。</p><img src="flower.jpg" alt="flower.jpg" /> </div><div id="rotateAnticlockwise"><p>rotate(angle)使用負值將逆時針旋轉(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)換, 改變元素的寬度和高度。設(shè)置元素寬度為其原始寬度的x倍, 同時設(shè)置元素高度為其原始高度的y倍。
5.2. scaleX(x)定義2D縮放轉(zhuǎn)換, 改變元素的寬度。設(shè)置元素寬度為其原始寬度的x倍。
5.3. scaleY(y)定義2D縮放轉(zhuǎn)換, 改變元素的高度。設(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)換, 改變元素的寬度。設(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)換, 改變元素的高度。設(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)換, 改變元素的寬度和高度。設(shè)置元素寬度為其原始寬度的x倍, 同時設(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軸傾斜給定角度。如果未指定第二個參數(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軸傾斜給定角度。如果未指定第二個參數(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變換方法組合為一個。
7.2. matrix()方法可接受六個參數(shù), 其中包括數(shù)學函數(shù), 這些參數(shù)使您可以旋轉(zhuǎn)、縮放、移動(平移)和傾斜元素。參數(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转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 042_CSS3字体
- 下一篇： 044_CSS33D转换