地圖在 app 中使用還是很廣泛的，常見的應用常見有： 1、獲取自己的位置，規劃路線。 2、使用標記點進行標記多個位置。 3、繪製多邊形，使用圍牆標記位置等等。 此篇文章就以高德地圖為例，以上述三個常見需求為例，教大家如何在 uniapp 中添加地圖。 作為一個不管閑事的前端姑娘，我就忽略掉那些繁瑣 ...
變形是CSS3中比較顛覆性的特征之一，今天介紹四種2D變形旋轉、縮放、傾斜、位移變形。
變形在CSS3用 transform 屬性 來實現。
transform-origin 屬性
transform-origin 表示旋轉的原點，預設是在盒子的中心位置(center)。
transform-origin 的值可以是一個、兩個或者三個，其中的每個值都表示一個方向上的偏移量。沒有明確定義將預設為 center。
transform-origin: x y z;
- 第一個值 表示X軸上的偏移量， 可以使用 像素等長度單位、百分比 表示；也可以使用 left、center、right、top、bottom當中的一個值表示。
- 第二個值 表示Y軸上的偏移量， 可以使用 像素等長度單位、百分比 表示；也可以使用 left、center、right、top、bottom當中的一個值表示。
- 第三個值 表示Z軸上的偏移量，只能使用 像素 等長度單位表示。
旋轉變形
旋轉變形即使一個盒子發生旋轉。
用rotate() 函數來給 transform 屬性賦值，即可實現旋轉變形，若角度為正，則順時針旋轉，否則逆時針旋轉。
語法
transform: rotate(45deg)
舉例
盒子以中心為原點，旋轉 45度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>旋轉變形</title>
<style>
.box {
margin: 50px;
width: 100px;
height: 100px;
background-color: blue;
transform-origin: center;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
縮放變形
縮放變形即放大縮小一個盒子。
用scale() 函數來給 transform 屬性賦值，即可實現縮放變形, scale 函數接受的值為縮放比例， 大於1 表示放大， 小於1表示縮小。
語法
transform: scale(2);
舉例
三個盒子，一個放大，一個縮小，一個不變。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: orange;
margin: 50px;
}
.box1 {
transform: scale(2);
}
.box3 {
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
傾斜變形
傾斜變形即使一個盒子傾斜。
用skew() 函數來給 transform 屬性賦值，即可實現傾斜變形, skew 函數接受兩個值， 第一個值表示X軸的斜切角度，第二個值表示Y軸的斜切角度。
語法
tranform: skew(10deg, 20deg)
舉例
兩個盒子，其中一個盒子不變，另一個盒子x軸傾斜10 度， Y軸傾斜0度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>斜切變形</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: orange;
margin: 50px;
}
.box2 {
transform-origin: center;
transform: skew(10deg, 0deg);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
位移變形
位移變形即使一個盒子的 位置發生位移， 有點像之前講到過的 相對定位，同樣位移變形後，原來的位置無法被別的盒子占用。
用translate() 函數來給 transform 屬性賦值，即可實現位移變形, translate函數接受兩個值， 第一個值表示向右移動距離， 第二個值表示向下移動距離。
語法
transform: translate(100px 200px)
舉例
三個盒子，使得第二個盒子的位置發生變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>位移變形</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
transform: translate(200px, 200px);
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
微信公眾號
