transform功能
放縮
使用sacle方法實現文字或映像的放縮處理，在參數中指定縮放倍率，比如sacle(0.5)表示縮小50%，例子如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scale方法使用樣本</title> <style> p { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } </style></head><body><p>樣本文字</p></body></html>
另外，可以分別指定元素水平方向的放大倍率與垂直方向的放大倍率，例子如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scale方法使用樣本</title> <style> p { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: scale(0.5,2); -moz-transform: scale(0.5,2); -o-transform: scale(0.5,2); } </style></head><body><p>樣本文字</p></body></html>
傾斜
使用skew方法來實現文字或映像的傾斜處理，在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度，例如”skew(30deg,30deg)”表示水平方向上傾斜30度，垂直方向傾斜30度，例子如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>skew方法使用樣本</title> <style> p { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg,30deg); -o-transform: skew(30deg,30deg); } </style></head><body><p>樣本文字</p></body></html>
旋轉
使用rotate方法將元素進行旋轉，共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉。例子如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>對元素使用多重變形的樣本</title> <style> p { margin: 100px; width: 300px; background-color: yellow; text-align: center; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); } </style></head><body><p>樣本文字</p></body></html>
移動
使用translate方法來將文字或映像進行移動，在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離。例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>translate方法使用樣本</title> <style> p { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: translate(50px,50px); -moz-transform: translate(50px,50px); -o-transform: translate(50px,50px); } </style></head><body><p>樣本文字</p></body></html>
變形樣本
樣本1：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>對元素使用多重變形的樣本</title> <style> p { width: 300px; background-color: yellow; text-align: center; -webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5); -moz-transform: translate(50px,50px) rotate(45deg) scale(1.5); -o-transform: translate(50px,50px) rotate(45deg) scale(1.5); } </style></head><body><p>樣本文字</p></body></html>
這個例子是先移動，然後旋轉，最後放縮
效果：
樣本2：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>對元素使用多重變形的樣本</title> <style> p { width: 300px; background-color: yellow; text-align: center; -webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px); -moz-transform:rotate(45deg) scale(1.5) translate(150px,200px); -o-transform: rotate(45deg) scale(1.5) translate(150px,200px); } </style></head><body><p>樣本文字</p></body></html>
先旋轉，然後在放縮，最後移動
效果：
從兩個樣本的運行結果中我們可以看出，元素在兩個頁面上所處於位置並不相同。我們來看看他們的的詳細步驟：
第一個樣本：
1） 首先向右移動150px，向下移動200px。
2） 然後旋轉45度，並且放大1.5倍。
第二個樣本：
1） 首先旋轉45度，並且放大1.5倍。
2） 然後向右移動150px，向下移動200px。
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
