這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

憂慮像一把搖椅

它可以使你有事做

但不能使你前進一步

- 2024.04.10 -

在深入探討CSS變形動畫之前，讓我們先探討一下掌握它之后你可以實現哪些有趣的效果。

學習了CSS變形動畫之后，你將能夠為你的網頁添加引人注目的動態效果，例如創建一個立體的3D魔方，或者設計一個引人入勝的旋轉菜單。這些僅僅是眾多可能性中的一小部分，但或許可以勾起我們的學習興趣。

一、什么是CSS變形動畫？

CSS變形動畫是利用CSS3的transform屬性創建的動畫效果。它可以使元素旋轉、縮放、傾斜甚至翻轉，讓靜態的網頁元素動起來，為用戶帶來更加豐富的交互體驗。

坐標系統

首先我們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。

那么如何來理解X,Y,Z這三條軸的關系呢？可以看一下下面這張圖。

• X軸代表水平軸
• Y軸代表垂直軸
• Z軸代表縱深軸

X和Y軸都非常好理解，怎么理解這個Z軸呢？

CSS的中文名稱叫做層疊樣式表，那么它肯定是一層一層的。之前學習過z-index就是用來設置層的優先級，優先級越高越在上面，也可以理解為離我們肉眼越近，它把優先級低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。

• Z軸數值越大，說明觀測距離越遠。
• Z軸的數值可以無限大，所以設置的時候一定要小心。

二、變形操作

使用 transform 來控制元素變形操作，包括控制移動、旋轉、傾斜、3D轉換等。

下面我們通過一些例子來演示一下，比較常用的變形操作：

2.1 位移 translate()

translate()函數可以將元素向指定的方向移動，類似于position中的relative?；蛞院唵蔚睦斫鉃椋褂胻ranslate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。

想象一下，當你滾動頁面時，一個元素平滑地從一個位置滑向另一個位置，這種流暢的過渡效果可以大大提升用戶體驗。

translate我們分為三種情況：

1）translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

2）translateX(x)僅水平方向移動（X軸移動）

3）translateY(Y)僅垂直方向移動（Y軸移動）

實例演示：通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。

HTML代碼：

<div class="wrapper">
<div>我向右向下移動</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}

演示結果：

2.2 旋轉 rotate()

旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。旋轉不僅可以是固定的度數，還可以是動態變化的，創造出無限的可能性。

它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。如下圖所示：

HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

演示結果：

2.3 扭曲 skew()

扭曲skew()函數能夠讓元素傾斜顯示。這種效果常常用于模擬速度感或者傾斜的視覺效果。

它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

Skew()具有三種情況：

1）skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。

2）skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3）skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

示例演示：

通過skew（）函數將長方形變成平行四邊形。

HTML代碼：

<div class="wrapper">
<div>我變成平形四邊形</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}

演示結果：

2.4 縮放 scale()

縮放 scale()函數 讓元素根據中心原點對對象進行縮放。這不僅可以用來模擬放大鏡效果，還可以創造出元素的進入和退出動畫，比如一個圖片慢慢縮小直至消失。

縮放 scale 具有三種情況：

1） scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。

例如：

div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}

注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。

2）scaleX(x)元素僅水平方向縮放（X軸縮放）

3）scaleY(y)元素僅垂直方向縮放（Y軸縮放）

HTML代碼：

<div class="wrapper">
<div>我將放大1.5倍</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}

演示結果：

注意：scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮?。欢魏未笥诨虻扔?.01的值，作用是讓元素放大。

2.5 矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素。

此屬性值使用涉及到數學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數學矩陣有一定的知識。

示例演示：通過matrix()函數來模擬transform中translate()位移的效果。
HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}

演示結果：

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2.6 原點 transform-origin

任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。

但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。

transform-origin取值和元素設置背景中的background-position取值類似，如下表所示：

示例演示：

通過transform-origin改變元素原點到左上角，然后進行順時旋轉45度。

HTML代碼：

<div>
<div>原點在默認位置處</div>
</div>
<div class="wrapper transform-origin">
<div>原點重置到左上角</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

演示結果：

以上就是css動畫中幾種基本的變形技巧了，掌握這些我們可以操控我們的網頁元素實現我們想要的一些基本動畫效果。

在這個充滿創造力的時代，CSS變形動畫是每個前端開發者必備的技能。它不僅能提升用戶體驗，更能激發設計師和開發者的創意火花。所以，不妨嘗試一下，讓你的網頁動起來，給用戶留下深刻的印象吧！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

果你發現，剛買來的電腦在運行一些程序的時候，程序界面總有一種發虛的感覺，那不是電腦屏幕的問題，也不是系統的問題，而是Windows 10的縮放機制不完善的問題。

在很多人的印象中，Windows系統對于高分屏的支持一直不佳，尤其是Windows 8階段，很多傳統exe應用的界面在系統的縮放機制下變得非常模糊，可用性很低。到了Windows 10，這一情況有沒有改觀呢？

這件事僅僅微軟用力是不行的，還需要第三方軟件對其進行優化。從筆者使用Windows 10來看，第三方軟件已經沒有那么不堪了，但與macOS的水平還有很大差距。

Windows 10的縮放機制

要更改Windows 10的縮放，需要在桌面右擊，選擇顯示設置，在彈出的設置界面的“縮放與布局”能夠對縮放比例進行直接更改，操作比Windows 7要方便很多。

我們直接按照系統推薦的縮放比例設置就可以了，但偶爾會遇到圖標過大的情況。一般情況下，13.3英寸、1080P縮放比例設置為150%，14英寸、15.6英寸、1080P縮放比例設置為125%。這是推薦筆記本的縮放比例。

臺式機外接顯示器的話就不好說了，大家可以在設置中進行自行調整。需要注意一點，修改之后一定要注銷，不然可能會出現界面卡頓等情況。

對于多屏用戶而言，在調整縮放比例之前一定要看縮放比例對應的是哪塊屏幕?？梢韵赛c選屏幕之后再進行縮放調整，縮放過程中不會影響到其他屏幕。

本文屬于原創文章，如若轉載，請注明來源：Windows 10學院之初中（08） 縮放機制http://nb.zol.com.cn/682/6828341.html