CSS3 2D轉換
阿新 • • 發佈：2018-12-10
1，translate
語法：translate: transform(x, y);
從當前位置，向下移動x距離，向右移動y距離，x和y可以是百分比，允許負值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS3</title> <link rel="stylesheet" href=""> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: rgba(255, 0, 0, .5); transform: translate(50px, 50px); } </style> </head> <body> <div> </div> </body> </html>
2，rotate()
給定一個度數，順時針旋轉，負值是逆時針旋轉
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS3</title> <link rel="stylesheet" href=""> <style type="text/css"> *{ padding: 0; margin: 0; } div{ margin: 100px; width: 100px; height: 100px; background-color: rgba(255, 0, 0, .5); transform: rotate(30deg); } </style> </head> <body> <div> </div> </body> </html>
3，scale()
指定改元素變大或縮小的倍數
4，skew()
包含兩個引數值，分別表示x軸和y軸傾斜的角度，允許負值，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS3</title> <link rel="stylesheet" href=""> <style type="text/css"> *{ padding: 0; margin: 0; } div{ margin: 50px; width: 100px; height: 100px; background-color: rgba(255, 0, 0, .5); transform: skew(0deg, 0deg); } </style> </head> <body> <div> This is a div label </div> </body> </html>
