CSS3中的变形处理
生活随笔
收集整理的這篇文章主要介紹了
CSS3中的变形处理
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在css3中，可以利用transform功能來實(shí)現(xiàn)文字或者圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四種類型的變形處理。
- 旋轉(zhuǎn)
旋轉(zhuǎn)功能使用rotate方法參數(shù)中加入角度值，方向?yàn)轫槙r(shí)針旋轉(zhuǎn)。示例清單如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>rotate使用實(shí)例</title> <style> div{ width:200px; margin:200px auto; background-color:red; text-align:center; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); } </style> </head> <body> <div>示例文字</div> </body> </html>效果圖：
- 縮放
使用scale方法來實(shí)現(xiàn)文字或圖像的縮放處理，參數(shù)為水平縮小度數(shù)和垂直放大倍數(shù)。示例清單如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>scale使用實(shí)例</title> <style> div{ width:200px; margin:200px auto; background-color:red; text-align:center; -webkit-transform:scale(0.5,2); -moz-transform:scale(0.5,2); -o-transform:scale(0.5,2); } </style> </head> <body> <div>示例文字</div> </body> </html> 效果圖：- 傾斜
使用skew實(shí)現(xiàn)傾斜效果，參數(shù)為水平和垂直傾斜30度。示例清單如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>scale使用實(shí)例</title> <style> div{ width:200px; margin:200px auto; background-color:red; text-align:center; -webkit-transform:skew(30deg,30deg); -moz-transform:skew(30deg,30deg); -o-transform:skew(30deg,30deg); } </style> </head> <body> <div>示例文字</div> </body> </html>?
效果圖：- 移動(dòng)
使用translate，參數(shù)為水平向上和垂直向上移動(dòng)50px。示例清單如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>scale使用實(shí)例</title> <style> div{ width:200px; margin:200px auto; background-color:red; text-align:center; -webkit-transform:translate(50px,50px); -moz-transform:translate(50px,50px); -o-transform:translate(50px,50px); } </style> </head> <body><div>示例文字</div> </body> </html>?
效果圖：- 對(duì)一個(gè)元素使用多種變形。示例清單如下：
?
效果圖：說明：第一張圖為未變形前，后一張為變形后。
轉(zhuǎn)載于:https://www.cnblogs.com/itsnail/p/3514798.html
總結(jié)
以上是生活随笔為你收集整理的CSS3中的变形处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ApplicationContextAw
- 下一篇： CSS实现背景透明而背景上的文字图片不透