CSS3中關於變形的一些處理
- 零下一度原創
- 2017-06-28 09:25:471345瀏覽
變形分類
-
縮放
使用scale方法來實作文字或影像的縮放，在參數中指定縮放倍率。例如“scale（0.5）”，表示縮小50
-
傾斜
#使用skew方法來實現文字或圖像的縮放，在參數中指定水平方向的傾斜角度與垂直方向的傾斜角度，若只有一個數值，則為水平方向的傾斜角度，單位為deg。
註：rotate表示的是旋轉，僅一個數值，表示水平方向的旋轉角度。
-
移動
使用translate方法來實現文字或影像的移動，在參數中指定水平方向的移動與垂直方向的移動，若只有一個數值，則為水平方向的移動。
對一個元素的多種變形方法
格式範例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <section id="a-section1-3-b">a-section1-3-b</section>11
<section id="section1-4-b">section1-4-b</section>12 <style>13
[id $= 'b']{ /* id以b结尾的 */14 background-color: lightpink;15
-webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);16
-moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);17
-ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);18
-o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);19
transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);20
/*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/21 }22
#a-section1-3-b{23 -webkit-transform-origin: left bottom;24
-moz-transform-origin: left bottom;25 -ms-transform-origin: left bottom;26
-o-transform-origin: left bottom;27 transform-origin: left bottom;28
/*更换变形原点*/ }
</style>
</body>
</html>變形基點transform-origin
這個參數可以改變變形基點，其屬性值表示「基準點在元素水平方向上的位置，基準點在元素垂直方向上的位置」。其中「基準點在元素水平方向上的位置」中可以指定的值為left，center，right，「基準點在元素垂直方向上的位置」中可以指定的值為top，center，bottom。
#以上是CSS3中關於變形的一些處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：分享幾種CSS製作選單清單的方法下一篇：分享幾種CSS製作選單清單的方法