CSS佈局--transform應用（矩形旋轉、縮放、傾斜、滾動、3D轉換）程式碼
阿新 • • 發佈：2019-02-13
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body, div { margin:0; padding:0; } div { width: 100px; height: 100px; background-color: burlywood; margin-left: 50px; border: 1px solid red; display: inline-block;/*不換行，但是可以設定width跟height*/ } /* translate(tx, ty) 該函式設定html元件橫向移動tx距離，縱向移動ty距離。如果ty省略那麼，預設是0。 translate(tx) -> translateX(tx) translate(ty) -> translateY(ty) */ .translate-original {} .translate-now { -webkit-transform: translate(10px, 10px); } /* rotate(angle)單位是deg 該函式設定html元件順時針旋轉angle角度 */ .rotate-now { -webkit-transform: rotate(30deg); } /* scale(sx, sy); 該函式設定設定HTML元件上橫向縮放比為sx，縱向縮放比為sy，如果只寫一個引數，sy省略，預設是sy==sx。 scaleX(sx) scaleY(sy) */ .scale-now { -webkit-transform: scale(1.5, 0.5); } .scale-now2 { -webkit-transform: scale(0.5, 1.5); } /* skew(sx, sy) 該函式設定html元件沿著x軸傾斜sx角度，沿著y軸傾斜sy角度，如果只寫一個引數，sy預設是0。 skewX(sx) skewY(sy) */ .skew-now { -webkit-transform: skew(45deg, 0deg); } .skew-now2 { -webkit-transform: skewY(45deg); } /*複合*/ .component { -webkit-transform: skewY(45deg) scale(1.5, 0.5); } /*指定中心點*/ .center { -webkit-transform: skewY(45deg); -webkit-transform-origin: left top; } /* matrix(m11, m12, m21, m22, dx, dy); 矩陣變換函式，前四個引數將組成變形矩陣，dx和dy負責將座標進行平移。 每個座標點由(dx, dy)變為(x*m11 + y*m21 + dx, x*m12 + y*m22 + dy); eg -> matix(1.5, 0, 0, 1, 0, 0); (x*1.5 + y*0 + 0, x*0 + y*1 + 0); (1.5x, y) */ .matrix { -webkit-transform: matrix(1.5, 0, 0, 1, 0, 0); } /* rotateX(angle)，3D轉換，沿著X軸轉動 rotateY(angle)，3D轉換，沿著Y軸轉動 */ .rotateX { -webkit-transform: rotateX(70deg); } .rotateY { -webkit-transform: rotateY(70deg); } </style> </head> <body> <div>文字</div> 沒有變動 <div>文字</div> <hr/> <div>文字</div> 移動10px 10px <div class="translate-now">文字</div> <hr/> <div>文字</div> 旋轉30度 <div class="rotate-now">文字</div> <hr/> <div>文字</div> 縮放1.5, 0.5 <div class="scale-now">文字</div> <hr/> <div>文字</div> 縮放0.5, 1.5 <div class="scale-now2">文字</div> <hr/> <div>文字</div> x軸傾斜45度 <div class="skew-now">文字</div> <hr/> <div>文字</div> y軸傾斜45度 <div class="skew-now2">文字</div> <hr/> <div>文字</div> y軸傾斜45度 並且縮放1.5，0.5 <div class="component">文字</div> <hr style="margin-top: 50px"/> <div>文字</div> y軸傾斜45度 中心為left top <div class="center">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 矩陣的引數為1.5, 0, 0, 1, 0, 0 <div class="matrix">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 沿著x軸滾動70deg <div class="rotateX">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 沿著y軸滾動70deg <div class="rotateY">文字</div> </body> </html>