2D 變形(變換)
使用
transform屬性可以對元素進行旋轉、縮放、平移、傾斜
旋轉
使用 transform:rotate() 屬性來設置元素的旋轉
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: deeppink;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 2s;
}
.box:hover {
transform: rotate(360deg) ;
}
</style>
<body>
<div class="box"></div>
</body>
運行結果
縮放
transform:scale() 屬性值可以來設置元素縮放的比例。
參數：
- 設置一個值
單一的數值即指定了一個縮放係數，同時作用於X軸和Y軸讓該元素進行縮放
比 1 大時，元素放大，比 1 小時，元素縮小 - 設置兩個長度/百分比值
兩個數值即分別指定了2D比例的X軸和Y軸的縮放係數，相當於指定了兩個值的scale()（2D縮放）函數。
/* 元素放大 */
transform:scale(2);
/* 元素縮小 */
transform:scale(0.5);
/* X軸放大,Y軸縮小 */
transform: scale(1.5, 0.5);
傾斜
使用 transform:skew() 可以設置元素傾斜，skewX() 表示按X軸方向傾斜，skewY() 表示按Y軸方向傾斜，單位可以使用deg
參數：
一個參數，默認和skewX() 相同
設置2個參數，可以同時按X軸和Y軸的方向傾斜
/* 一個參數默認按X軸方向傾斜 */
transform:skew(30deg);
/* 表示按Y軸方向傾斜 */
transform:skewY(30deg);
/* 設置兩個參數時，按照兩個軸(x,y)的方向傾斜 */
transform:skew(30deg,30deg);
平移
使用transform:translate() 屬性可以操作元素平移，默認是 x軸(水平方向)上的平移。
設置一個參數，默認和 translateX() 相同
/* 修改 tramsform 的屬性值爲 translate() */
transform: translate(100px);
運行結果
使用translateY()可以設置元素在Y軸(垂直方向)上的平移
transform:translateY(50px);
transform:translate(x,y) 也可以設置兩個值，指的是向兩個方向同時平移
transform:translateY(50px,50px);
基點變換
首先，元素的 旋轉、縮放、傾斜 默認都是按照 基點(默認爲元素的中心點) 來變換的
可以通過transform-origin屬性來改變基點的位置
transform-origin屬性可以使用一個，兩個或三個值來指定，其中每個值都表示一個偏移量。 沒有明確定義的偏移將重置爲其對應的初始值。- 如果定義了兩個或更多值並且沒有值的關鍵字，或者唯一使用的關鍵字是center，則第一個值表示水平偏移量，第二個值表示垂直偏移量。
![在這裏插入圖片描述]()
<style>
* {
margin: 0;
padding: 0;
}
/* 禁用系統滾動條 */
html,
body {
height: 100%;
overflow: hidden;
}
.box {
width: 150px;
height: 150px;
background-color: pink;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 1s;
}
/* 設置一個僞元素，用來模擬基點 */
.box::after {
content: "";
display: block;
position: absolute;
left: 10px;
top: 10px;
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
}
.box:hover {
transform: rotate(90deg);
/* 改變基點 */
transform-origin: 10px 10px;
}
</style>
<body>
<div class="box"></div>
</body>
/* 表示左上角 */
transform-origin: left top;
/* 表示左下角 */
transform-origin: left bottom;
/* 表示左邊居中的位置 */
transform-origin: left center;
/* 表示右上角 */
transform-origin: right top;
/* 表示右下角 */
transform-origin: right bottom;
/* 表示右邊居中的位置 */
transform-origin: right center;
變換組合
變換組合就是將多個變換組合到一起，例如transform:rotate(90deg) scale(0.5); 表示元素旋轉90度，然後縮小，旋轉和縮小是同時完成的。
/* 旋轉和縮放組合時不會影響元素的位置，所以組合的時候順序可以改變 */
transform:rotate(90deg) scale(0.5);
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.box {
width: 600px;
height: 300px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 1s;
}
.inner1,
.inner2 {
width: 80px;
height: 80px;
background-color: deeppink;
margin: 50px 0;
transition: 1s;
}
.box:hover .inner1 {
/* 移動在前邊 */
transform: translate(100px) scale(1.5);
}
.box:hover .inner2 {
/* 縮放在前邊 */
transform: scale(1.5) translate(100px);
}
</style>
<body>
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
注意：變換組合時，計算方向是從右往左進行計算的。變換的底層其實就是矩陣的運算。
3D 變形(變換)
3D 旋轉
transform: rotate3d(x,y,z,deg);
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -200px;
border: 1px solid;
/* 景深 */
perspective: 200px;
}
.content {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
border: 1px solid;
border-radius: 50%;
background-color: deeppink;
font: 50px/200px "宋體";
text-align: center;
transition: 5s;
}
.box:hover .content {
transform: rotate3d(1, 1, 1, 360deg);
}
</style>
<body>
<div class="box">
<div class="content">
圓滾滾
</div>
</div>
</body>
3D 平移
transform: translate3d(x,y,z); X軸和Y軸可以設置百分比，Z軸必須是具體的值
transform: translate3d(100%,100%,10px);
3D 縮放
三個長度/百分比值
三個數值即分別指定了3D比例的X軸、Y軸和Z軸的縮放係數. 相當於一個scale3d()函數。
transform: scale3d(x,y,z);
transform: scale3d(0.5,0.5,0.5);
雖然效果不明顯，但它確實是三個維度上的縮放
景深和其他屬性
簡單的理解，景深就是我們肉眼距離顯示器的這段距離，景深越大，元素離我們就越遠，效果就不好。
在 CSS3 中， 通過 perspective 屬性來激活一個 3D 空間，屬性值就是景深的大小（默認值爲 none 無景深）
讓 3D 場景有 近大遠小 的效果 (我們肉眼距離屏幕的距離)
景深是一個不可繼承屬性，但它可以作用於後代元素(不是作用於本身的)
景深的原理:
- 景深越大，滅點越遠，元素變形更小
- 景深越小，滅點越近，元素變形更大
景深基點 控制視角的位置
perspective-origin:left,top; 默認值爲 50% 50% 參照與盒模型。
注意：一定要避免景深疊加問題
transform-style: preserve-3d;
營造有層級的 3D 舞臺
是一個不可繼承屬性，他作用於子元素
backface-visibility: hidden;
用來設置是否顯示元素的背面，默認是顯示的
3D 案例
3D立方體
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
position: absolute;
top: 50%;
left: 50%;
margin: -200px -200px;
width: 400px;
height: 400px;
border: 2px solid;
perspective: 500px; /* 設置景深 */
}
#wrap>.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px -50px;
transition: 5s;
/* 搭建3d舞臺 */
transform-style: preserve-3d;
transform-origin: center center -50px;
}
/* 設置所有面的公共樣式 */
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(123, 121, 133, .5);
font: 50px/100px "微軟雅黑";
text-align: center;
/* 設置隱藏元素的背面 */
backface-visibility: hidden;
}
/* 下 */
#wrap>.box>div:nth-child(5) {
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
/* 上 */
#wrap>.box>div:nth-child(6) {
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
/* 設置第四個面 "右" */
#wrap>.box>div:nth-child(4) {
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
/* 設置第三個面 "左" */
#wrap>.box>div:nth-child(3) {
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
/* 設置第二個面 "後" */
#wrap>.box>div:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
}
/* 設置第一個面 "前" */
#wrap>.box>div:nth-child(1) {
z-index: 1;
}
#wrap:hover .box {
transform: rotateX(360deg);
}
</style>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>後</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
