★文章內容學習來源：拉勾教育大前端就業集訓營
2D 轉換
一、介紹
- 屬性名 ：
transform - 作用：對元素進行移動、縮放、旋轉、拉長或拉伸，
配合過渡和即將學習的影片知識，可以取代大量之前只能靠Flash才可以實作的效果， - 屬性值 ：多種轉換方法的屬性值，可以實作不同的轉換效果，詳細見以下， |
二、屬性值及舉例
1.位移 translate()
- transform 的屬性值為
translate()時，可以實作位移效果， - 書寫語法：
| 值 | 說明 |
|---|---|
translate(x,y) | x,y分別為水平和垂直方向位移的距離，可以為px值或百分比， 區分正負 |
translate(x) | 只有一個數值，表示水平方向的位移 |
- 百分比指的是元素自身的百分比（border及以內，不包括margin）
1.1舉例 translate(x) （只有一個數值，表示水平方向的位移）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D 轉換-位移(x)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*定義一個box表示原img所在的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 200px;
}
.box img {
height: 340px;
transform: translate(100px);/*向右移動100px*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
1.2舉例 translate(x,y) （x,y分別為水平和垂直方向位移的距離）
.box img {
height: 340px;
transform: translate(-100px,-50px); /*左移100px，上移50px*/
}
2. 縮放scale()
- transform 的屬性值為
scale()時，可以實作元素縮放效果， - 書寫語法：
| 值 | 說明 |
|---|---|
scale(x, y) | x,y分別為改變元素的寬度和高度的倍數 |
scale(n) | 只有一個值，表示寬度和高度同時縮放n倍 |
scaleX(n) | 改變元素的寬度倍數 |
scaleY(n) | 改變元素的高度倍數 |
2.1舉例scale(x, y)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D轉換-縮放(x, y)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*外面的box代表img原來的大小*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 100px;
}
.box img {
height: 340px;
transform: scale(0.5,0.7); /*水平方向縮放0.5倍，垂直方向縮放0.7倍*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
2.2舉例scale(n)
.box img {
height: 340px;
transform: scale(0.5); /*寬度高度同時縮放0.5倍*/
}
2.3舉例scaleX(n)
.box img {
height: 340px;
transform: scaleX(0.5); /*寬度縮放0.5倍*/
}
2.4舉例scaleY(n)
.box img {
height: 340px;
transform: scaleY(0.5); /*高度縮放0.5倍*/
}
3.旋轉 rotate()
- transform 屬性值設定為
rotate()時，實作元素的旋轉， - 書寫語法：
rotate(數字deg); - 其中，deg為度數單位，正數表示順時針旋轉，負數表示逆時針旋轉，
- 2D的旋轉只有一個屬性值，
- 注意：元素旋轉后，坐標軸也跟著發生轉變，
因此，多個屬性值同時設定給 transform 時，書寫順序不同導致的轉換效果有差異，（具體參見3.3和3.4舉例）
3.1舉例：旋轉（正數）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D轉換-旋轉rotate(正數)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*外面的box代表img原來的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 100px;
}
.box img {
height: 340px;
transform: rotate(30deg); /*順時針*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
3.2舉例：旋轉（負數）
.box img {
height: 340px;
transform: rotate(-30deg); /*逆時針*/
}
因為元素旋轉后，坐標軸也跟著發生轉變，
因此，多個屬性值同時設定給 transform 時，書寫順序不同導致的轉換效果有差異，為了更好地感受差異，借用:hover偽類和transition過渡屬性，動態理解，如下兩個例子，
3.3舉例：先旋轉后位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D轉換-旋轉（先旋轉后位移）</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*外面的box代表img原來的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 50px;
}
.box img {
height: 340px;
}
.box img:hover { /*滑鼠一懸停，進行*/
transform: rotate(30deg) translate(300px); /* 先旋轉后位移 */
transition: img 5s linear 0 ; /*過渡屬性設定，上篇有介紹*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
3.4舉例：先位移后旋轉
.box img:hover {
transform: translate(300px) rotate(30deg) ; /* 先位移后旋轉 */
transition: img 5s linear 0 ;
}
4.傾斜 skew()
- transform 屬性值設定為
skew()時，實作元素的傾斜， - 書寫語法：
transform: skew(數字deg,數字deg); - 兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個數值不寫默認為0，
- 水平方向，底邊變化，正數向右；
- 垂直方向，右邊變化，正數向下；
*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D轉換-傾斜 skew() </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*外面的box代表img原來的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px;
}
.box img {
height: 340px;
transform: skew(30deg,); /*水平方向，正數*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
4.2舉例：水平方向負數
.box img {
height: 340px;
transform: skew(-30deg);/*水平方向，負數*/
}
4.3舉例：垂直方向正數
.box img {
height: 340px;
transform: skew(0,30deg); /*垂直方向，正數*/
}
4.4舉例：垂直方向負數
.box img {
height: 340px;
transform: skew(0,-30deg); /*垂直方向，正數*/
}
三、 transform-origin 屬性
1.介紹
- 作用：設定調整元素的水平和垂直方向原點的位置， 調整元素的基準點，
- 屬性值：包含兩個，中間使用空格分隔，
- 語法：
transform-origin：x y ;
| 屬性值 | 說明 |
|---|---|
| x | 定義 X 軸的原點在何處，可能的值：left 、center、right、像素值、百分比 |
| y | 定義 Y 軸的原點在何處，可能的值：top、center、bottom、像素值、百分比 |
2.舉例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin屬性 </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{ /*外面的box代表img原來的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 200px;
}
.box img {
height: 340px;
transform-origin: left top; /*定義基準點*/
}
.box img:hover {
transform: rotate(-30deg); /*逆時針旋轉30deg*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
四、綜合應用——卡包特效案例
<html>
<head>
<title>卡包特效</title>
<style>
.box {
position : relative;
width: 300px;
height: 170px;
border: 1px solid black;
margin: 400px 50px;
}
.box img {
position :absolute;
left: 0;
top: 0;/*所有的卡片初始都在這個位置，所以要設定定位，子絕父相*/
width: 300px;
height: 170px;
transform-origin: right top;
transition: all 1s linear 0s;
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg"></img>
<img src="img/2.jpg"></img>
<img src="img/3.jpg"></img>
<img src="img/4.jpg"></img>
<img src="img/5.jpg"></img>
<img src="img/6.jpg"></img>
</div>
</body>
</html>
下篇繼續：
【45】CSS3 （4）——新增屬性③3D 轉換
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274415.html
標籤：其他
上一篇：CSS3快速入門：四、盒子模型