CSS變形動畫
阿新 • • 發佈：2020-07-21
CSS變形動畫
前言
在開始介紹CSS變形動畫之前，可以先了解一下學習了它之後能做什麼，有什麼用，這樣你看這篇文章可能會有一些動力。
學習了CSS變形動畫後，你可以為你的頁面做出很多炫酷的效果，如一個3D的魔方，一個很酷的旋轉選單等等。
在本章節中將會採用大量的例項進行演示，相信你如果看完這篇文章後寫出的頁面會更加的吸引眼球。
基礎知識
座標系統
首先我們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。
那麼如何來理解X,Y,Z這三條軸的關係呢？可以看一下下面這張圖。
X軸代表水平軸
Y軸代表垂直軸
Z軸代表縱深軸
X和Y軸都非常好理解，怎麼理解這個Z軸呢？
CSS的中文名稱叫做層疊樣式表，那麼它肯定是一層一層的。之前學習過z-index就是用來設定層的優先順序，優先順序越高越在上面，也可以理解為離我們肉眼越近，它把優先順序低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。
Z軸數值越大，說明觀測距離越遠。
Z軸的數值可以無限大，所以設定的時候一定要小心。
變形操作
可以使用transform規則控制元素的變形操作，包括元素移動、旋轉、傾斜、3D轉換等等。
下表中是CSS提供的變形動作，在接下來的學習中將會對一個變形動作進行詳解。
| 選項 | 說明 |
|---|---|
| none | 定義不進行轉換。 |
| translate(x,y) | 定義 2D 轉換。 |
| translate3d(x,y,z) | 定義 3D 轉換。 |
| translateX(x) | 定義轉換，只是用 X 軸的值。 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 |
| scale(x,y) | 定義 2D 縮放轉換。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 通過設定 X 軸的值來定義縮放轉換。 |
| scaleY(y) | 通過設定 Y 軸的值來定義縮放轉換。 |
| scaleZ(z) | 通過設定 Z 軸的值來定義 3D 縮放轉換。 |
| rotate(angle) | 定義 2D 旋轉，在引數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉。 |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉換。 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉換。 |
| perspective(n) | 為 3D 轉換元素定義透視檢視。 |
變形疊加
這其實是一個坑點，在使用變形中一定要注意，重複對元素設定變形操作時只在元素的原形態上操作。
我們可以先看一下下面的案例，不懂程式碼沒關係，懂這個意思就行了。
預設處理
下面設定了兩次移動，並不會移動550px 而是隻移動50px。
我們在元素中先設定了右移500px，滑鼠放上去時再往右移動50px，可是下面卻出現了向左移動的場景，這是因為對div進行了位置居中處理，它必須要按照之前居中的位置進行50px的移動。而不是按照居中後設定的500px的地方再進行向右移動50px。
上面這句話有點繞，總之。上面設定了，位置改變了，下面再設定，不會按照已改變的位置進行變化，而是按照原位置。
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px; /* 意思就是說按x軸移動500px */
transform: translateX(500px);
/* 過渡時間2s */
transition: 2s;
}
div:hover{
/* 意思就是說按x軸移動50px */
transform: translateX(50px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
程式碼示例
偽類疊加
還是設定兩次移動，如果移動的方向都一樣，且偽類設定的移動比原本的移動多一點，就在原本的基礎上直接進行變形，而不用再找開始位置了。
我們還是拿上面的案例，只不過偽類移動的數值將50px改為600px，比第一次設定大100px，那麼此時他就不會再往左走，而是直接在原有基礎上進行疊加，向右移動100px。
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
body {
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px; /* 意思就是說按x軸移動500px */
transform: translateX(500px);
/* 過渡時間2s */
transition: 2s;
}
div:hover{
/* 意思就是說按x軸移動600px */
transform: translateX(600px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
程式碼示例
內聯元素
內聯元素即行級元素，inline元素是不能參與變形的，將其轉為 inline-block 或 block 以及彈性元素時才可以產生變化效果。
:hover偽類
滑鼠移動到某一元素上發生的使用者行為。
當該行為出現時，我們可以為它指定一些引數的改變。
如下，改變顏色。
:target偽類
意思就是說你點選一個<a>，該<a>標籤中的href指向的錨點標籤會發生變化。
點選第一個<a>元素，與之相對的錨點元素髮生變化。
點選第二個<a>元素，與第一個<a>元素相對的錨點變化停止，與第二個<a>元素相對的錨點發生變化。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
div{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2em;
}
div:nth-child(1) {
background:red;
}
div:nth-child(2) {
background:blue;
}
#div-1:target{ }
#div-2:target{ }
</style>
</head>
<body>
<div id="div-1">原本顏色：紅</div>
<div id="div-2">原本顏色：藍</div>
<a href="#div-1">讓div-1變綠</a>
<a href="#div-2">讓div-2變黑</a>
</body>
</html>
程式碼示例
最後注意一點
事件元素上放過渡時間，:hover上放具體的事件，如移動，旋轉，傾斜等操作。
如果你設定了移動卻將過渡時間放在了:hover裡面，那麼就會出現下面這種情況。
可以看見，直勾勾的就回來了，這種效果顯然不是我們想要的。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
/* transition: 1s; */ }
div:last-child:hover {
transform: translateX(100px);
} </style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
移動元素
沿X軸移動時正值向右移動、負值向左移動
沿Y軸移動時正值向下移動、負值向上移動
如果使用百分數將控制元素的原尺寸計算百分比然後移動
可同時設定多個值，解析器會從左向右依次執行
變形是在原基礎上更改，即第二次設定值時不是在第一次值上變化
translateX
控制元素在X軸上的移動，正值向右、負值向左。
如，我們下面設定translateX(100px)，過渡時間為1s。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
transform: translateX(100px);
} </style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
translateY
控制元素在X軸上的移動，正值向下、負值向上。
如，我們下面設定translateY(100px)，過渡時間為1s。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
transform: translateY(100px);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
translate
translate是translateX以及translateY的簡寫模式，第一個值控制X移動，第二個值控制Y移動。
一句話，設定X與Y軸的移動，注意，這個方法中不包含Z軸，因為一旦有Z軸參與就會變為3D效果。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
/* 先設定X軸，再設定Y軸 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
百分比移動
當要移動的元素寬高為100px時，如果使用50%進行移動，則代表移動50px。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
/* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
}
div:first-child {
height: 8px;
width: 8px;
z-index: 1;
border-radius: 50%;
/* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px;
}
div:last-child {
height: 100px;
width: 100px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; }
div:last-child:hover {
/* 先設定X軸，再設定Y軸 */
transform: translate(50%,50%);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
元素居中
我們之前介紹過很多元素居中的方法，如定位操作，彈性盒模型，其實使用移動也可以達到元素居中的效果。
給你丟一套模板。
/* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+margin的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* left和top設定子元素寬高的負的50%就行 */
margin-left: -3px;
margin-top: -3px;
/* 這是彈性盒模型控制元素居中的方法 */
display: flex;
justify-content: center;
align-items: center;
/* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
/* X和Y設定子元素寬高的負的50%就行 */
transform: translate(-50%, -50%);
translateZ
控制Z軸移動，正數向外（距離我們近）、負數向裡移動（距離我們遠）。因為Z軸是透視軸沒有像X/Y一樣的固定尺寸，所以不能使用百分數。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
transform: perspective(900px) rotateY(60deg) scaleZ(5);
/* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
transform: translateZ(-100px);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 過渡時間1s */
transition: 1s;
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
translate3d
用於同時控制X/Y/Z軸的移動，三個值必須輸入如果某個軸不需要移動時設定為零。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
transform: perspective(900px) rotateY(60deg) scaleZ(5);
/* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 由於Z軸可以無限遠，所以不能用百分比 */
transform: translate3d(50%, 50%, 100px);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 過渡時間1s */
transition: 1s;
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
漸變輸入框
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
} #form-style-gradient {
width: 200px;
height: 200px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border: 1px solid #ccc; } #form-style-gradient label input { padding: 10px;
outline: none;
border: none;
background-color: #ecf0f1; } #form-style-gradient label {
width: 80%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
display: flex;
flex-flow: column;
justify-content: center;
align-self: center;
} #form-style-gradient label::before {
content: '';
position: absolute;
/* 移動到最下面 */
left: 0;
bottom: 0; height: 2px;
width: 100%; background: linear-gradient(to right, white, #1abc9c, #f1c40f, #e74c3c, white);
/* 移動到label標籤外，然後會被隱藏掉 */
transform: translateX(-100%);
transition: 2s; } #form-style-gradient label:hover::before {
/* 移動回來 */
transform: translateX(100%);
} </style>
</head> <body> <form id="form-style-gradient" action="">
<label>
<input type="text" name="username" placeholder="請輸入使用者名稱">
</label>
<label>
<input type="text" name="pwd" placeholder="請輸入密碼">
</label>
</form> </body> </html>
程式碼示例
頁面切換
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
padding: 0;
margin: 0;
} a {
text-decoration: none;
} body {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
} main {
position: relative;
background: #f3f3f3;
flex: 1;
overflow: hidden;
} nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 8vh;
text-align: center;
background: #34495e;
} nav a {
flex: 1;
font-size: 1.3em;
text-transform: uppercase;
font-weight: bold;
opacity: .8;
color: white;
} nav a:nth-child(2) {
border-right: solid 1px #aaa;
border-left: solid 1px #aaa;
} main>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 1s;
z-index: 1;
background: #f3f3f3;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translate(0, -100%);
color: white;
font-size: 2em;
} main>div:target {
opacity: 1;
transform: translate(0%, 0%);
} main>div:nth-of-type(1):target {
background: #3498db;
} main>div:nth-of-type(2):target {
background: #9b59b6;
} main>div:nth-of-type(3):target {
background: #16a085;
} div i[class^="fa"] {
font-size: 100px;
color: white;
}
</style>
</head> <body>
<main>
<div id="home">
<i class="fa fa-home" aria-hidden="true"></i>
houdunren.com
</div>
<div id="video">
<i class="fa fa-vimeo" aria-hidden="true"></i>
</div>
<div id="live">
<i class="fa fa-viadeo" aria-hidden="true"></i>
</div>
</main>
<nav>
<a href="#home">home</a>
<a href="#video">video</a>
<a href="#live">live</a>
</nav>
</body> </html>
程式碼示
縮放元素
比如數值為2時表示為原尺寸的兩倍。
數值為.5時為原尺寸的一半。
scaleX
按X軸縮放一半。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: scaleX(.5);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
scaleY
按Y軸縮放一半。
scale
使用 scale 可同時設定 X/Y 軸的縮放，如果只設定一個值時表示兩軸縮放相同。
使用數值定義縮放，如 .5 表示縮小一半，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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: scale(.5,2);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
scaleZ
沿Z軸縮放元素，需要有3D透視才可以檢視到效果。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
transform: perspective(900px) rotateY(45deg) scaleZ(5);
/* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 放大5倍 */
transform: scaleZ(5);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 過渡時間1s */
transition: 1s;
transform: translateZ(100px);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
scale3d
沿X/Y/Z三個軸縮放元素。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc; /* 如果將Z軸移動的:hover放在div上，我們不方便一直將滑鼠放在div上面，故我們設定成放在main上面讓div進行Z軸移動 */
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照Y軸旋轉60度，按Z軸放大5倍*/
transform: perspective(900px) rotateY(45deg) scaleZ(5);
/* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d; } main:hover div:nth-child(2) {
/* 放大5倍 */
transform: scale3d(.5,.5,.5);
} div {
height: 100px;
width: 100px;
background-color: blueviolet; /* 讓子元素脫離檔案流並參照副父級元素偏移。這是定位+移動的居中方法 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} div:nth-child(1) {
background-color: yellow; } div:nth-child(2) {
background-color: blueviolet;
/* 過渡時間1s */
transition: 1s;
transform: translateZ(100px);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
選單縮放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_v8yodek5od.css">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body{
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
} main{
width: 100px;
} div i{
display: inline-block;
background: darkgray;
font-size: 30px !important;
display: flex;
justify-content: center;
align-items: center;
} ul{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border: 1px solid #ddd;
text-transform: uppercase;
/* 基點設定為左上 */
transform-origin: left top;
/* 滑鼠放上去有個小手 */
cursor: pointer;
/* 透明度 */
opacity: .6;
transform: scale(0);
transition: 1s;
} ul>*{
margin: 3px; } main:hover ul{
transform: scale(1); }
</style>
</head>
<body>
<main>
<div>
<i class="iconfont icon-dingbudaohang-zhangh"></i>
</div>
<ul>
<li><a href=""></a>我的資料</li>
<li><a href=""></a>我的關注</li>
<li><a href=""></a>我的收藏</li>
</ul>
</main> </body>
</html>
程式碼示例
相簿放大
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: deepskyblue;
} img{ height: 100px;
/* 高斯模糊 */
filter: blur(10px);
transform: scale(.6);
transition: .5s;
/* 滑鼠小手 */
cursor: pointer;
border: 3px double black;
}
img:hover{
filter: none;
transform: scale(1.3);
} </style>
</head> <body>
<img src="./22.jpg" alt="">
<img src="./33.jpg" alt="">
<img src="./初音.jpg" alt="">
</body> </html>
程式碼示例
旋轉元素
使用CSS可以控制元素按照不同座標軸進行旋轉。
rotateX
控制元素按照X軸進行旋轉操作。單位為deg，即°度的意思。
按水平軸發生旋轉，如果旋轉90deg 將不可見。
正數向上翻，負數向下翻。
如何讓他可見呢？我們只需要將父級容器也旋轉一下，並加上透視3D效果即可。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateX(90deg);
} </style>
</head> <body>
<main>
<div>將按照X軸旋轉90deg</div>
</main>
</body> </html>
程式碼示例
rotateY
按垂直軸發生旋轉，如果旋轉90deg 將不可見。
正數向右翻，負數向左翻。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateY(90deg);
} </style>
</head> <body>
<main>
<div>將按照Y軸旋轉90deg</div>
</main>
</body> </html>
程式碼示例
rotateZ
按Z軸旋轉元素，效果就是沿X/Y軸的平面旋轉。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateZ(90deg);
} </style>
</head> <body>
<main>
<div>將按照Z軸旋轉90deg</div>
</main>
</body> </html>
程式碼示例
rotate
在X與Y軸平面旋轉，效果與使用 rotateZ 相同。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotate(90deg);
} </style>
</head> <body>
<main>
<div>將按照Z軸旋轉90deg</div>
</main>
</body> </html>
程式碼示例
rotate3d
同時設定X/Y/Z軸的旋轉向量值來控制元素的旋轉。
需要同時設定如下四個引數。
這個是按照向量進行旋轉的，比如第四個引數是90deg，那麼前三個引數填1就代表各轉90°。
rotate3d(tx,ty,tz,angle)
只轉X/Y軸
只轉Y/Z軸
X/Y/Z都轉
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
/* X/Y/Z */
transform: rotate3d(1,1,1,180deg);
} </style>
</head> <body>
<main>
<div>X/Y/Z 180°</div>
</main>
</body> </html>
程式碼示例
引數順序
可以同時設定多個旋轉規則，順序不同結果也會不同。
如下，先按X軸轉90，再按Y軸轉60
div:hover {
transform: rotateX(90deg) rotate(60deg);
}
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 150px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:hover {
transform: rotateX(90deg) rotate(60deg);
} </style>
</head> <body>
<main>
<div>X 90° Y 60°</div>
</main>
</body> </html>
程式碼示例
旋轉文字
<!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>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100vw; display: flex;
justify-content: center;
align-items: center; }
main{
width: 100px;
height: 100px; display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-color: blueviolet;
} main p{
display: flex;
justify-content: center;
align-items: center;
color: white; } main p span{
width: 50%;
height: 50%;
padding: 5px;
font-size: 1em;
box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
border-radius: 50%;
/* 過渡時間 */
transition: 1s; display: flex;
justify-content: center;
align-items: center;
} main p span:first-of-type{
color: green;
background-color: yellow;
}
main p span:nth-of-type(2){
color: yellow;
background-color: green;
} main p span:nth-of-type(3){
color: white;
background-color: deeppink;
} main p span:last-of-type{
color: red;
background-color: rgb(140, 173, 155);
} main:hover p span:nth-of-type(odd){
transform: rotate(360deg);
} main:hover p span:nth-of-type(even){
transform: rotate(-360deg);
} </style>
</head>
<body>
<main>
<p><span>C</span><span>S</span><span>S</span> <span>3</span></p>
<p>動畫</p>
</main>
</body>
</html>
程式碼示例
電子時鐘
這個層級有點多，每個刻度都是一個元素，每個刻度之間距離都是30°，然後再加上3根針就好了。
其實應該分四層，一層做事件驅動，一層做最下面的黑色背景，一層做紅色下面的指標，一層做紅色。
我就做了三層，所以事件驅動就只能放在<body>上了。
樣式有點醜，別介意...
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; } body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
} main {
height: 400px;
width: 400px;
background-color: #000;
border-radius: 50%; position: relative;
} main div{
height: 5%;
width: 5%;
background-color: green;
border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
} main ul:nth-of-type(1) {
height: 80%;
width: 80%;
background-color: red;
border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
} main ul:nth-of-type(1) li{ background-color: #fff; position: absolute;
top: 50%;
left: 50%;
/* 全部按照上方開始轉 */
transform-origin: top;
transition: 10s; } body:hover main ul:nth-of-type(1) li:nth-child(1){
transform:rotate(360deg)
} main ul:nth-of-type(1) li:nth-child(1){
/* 秒針 */
width: 5px;
height: 46%; } main ul:nth-of-type(1) li:nth-child(2){
/* 分針 */
width: 5px;
height: 40%; transform:rotate(10deg);
} main ul:nth-of-type(1) li:nth-child(3){
/* 分針 */
width: 10px;
height: 30%; transform:rotate(60deg);
} main ul:nth-of-type(2) {
height: 95%;
width: 90%; border-radius: 50%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1; } main ul:nth-of-type(2) li {
width: 10px;
height: 100%;
background-color: #fff; position: absolute;
top: 50%;
left: 50%;
} main ul:nth-of-type(2) li:nth-child(1) {
/* 由於不會疊加，所以我們需要在每個元素中設定 */
transform: translate(-50%, -50%) rotate(0deg);
} main ul:nth-of-type(2) li:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg);
} main ul:nth-of-type(2) li:nth-child(3) {
transform: translate(-50%, -50%) rotate(60deg);
} main ul:nth-of-type(2) li:nth-child(4) {
transform: translate(-50%, -50%) rotate(90deg);
} main ul:nth-of-type(2) li:nth-child(5) {
transform: translate(-50%, -50%) rotate(120deg);
} main ul:nth-of-type(2) li:nth-child(6) {
transform: translate(-50%, -50%) rotate(150deg);
}
</style>
</head> <body>
<main>
<!-- 中心點 -->
<div></div> <!-- 紅色錶盤 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul> <!-- 刻度針 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> </main>
</body> </html>
程式碼示例
傾斜元素
傾斜元素的單位也是deg，即為度數°。
skewX
按X軸傾斜60deg
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skewX(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
skewY
按Y軸傾斜60deg
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 200px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skewY(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
skew
同時設定X/Y軸傾斜操作，不指定第二個引數時Y軸傾斜為零。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 400px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s; } div:last-child:hover {
transform: skew(60deg, 60deg);
}
</style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
按鈕特效
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} div { display: flex;
justify-content: center;
align-items: center; padding: 10px 50px;
border: 5px double #ddd;
box-shadow: 0 3px 8px rgba(0, 0, 0, .3); background: #fa7d09;
color: #fff;
cursor: pointer; position: relative;
overflow: hidden;
z-index: 0;
} div::before {
content: "";
background: #679b9b;
height: 100%;
position: absolute;
/* 必須設定寬度，傾斜才會生效 */
width: 0;
align-self: center; transform: skewX(-45deg);
transition: all .8s;
z-index: -1;
} div:hover::before {
width: 200%;
}
</style>
</head> <body> <div>按鈕</div> </body> </html>
程式碼示例
立體按鈕
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
a{
width: 100px;
height: 30px;
font-size: 12px;
background: #900d0d;
color: white;
text-align: center;
line-height: 30px;
position: relative;
transform: skew(25deg,0) rotate(-15deg);
}
a::after{
content: "";
background: #900d0d;
height: 100%;
width: 10px;
position:absolute;
left: -10px;
transform: skew(0,-45deg) translate(0,5px); }
a::before{
content: "";
background: #900d0d;
height: 10px;
width: 100%;
position:absolute;
bottom:-10px;
left: 0;
transform: skew(-45deg,0) translate(-5px,0);
}
</style>
</head>
<body>
<a href="javascript:vido(0)">一磚下去可能要命</a>
</body>
</html>
程式碼示例
變形基點
使用 transform-origin 設定元素的X/YZ操作的基點，用於控制旋轉、傾斜等操作。
可以使用百分比，也可使用英文單詞進行修改。
百分比是按照變形元素的寬高進行取值。
旋轉預設以元素中心進行旋轉，改變基點後可控制旋轉點位置
元素移動不受變形基點所影響
平面旋轉
transform-origin: bottom right;將基點改在右下。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 220px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s;
/* 修改基點 */
transform-origin: bottom right; } main:hover div {
transform: rotate(90deg);
} </style>
</head> <body>
<main>
<div>將按照Z軸旋轉90deg 基點在右下</div>
</main>
</body> </html>
程式碼示例
傾斜控制
我們依然按照右下進行傾斜。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div:first-child {
height: 8px;
width: 8px;
background-color: black; z-index: 1;
border-radius: 50%; /* 脫離檔案流並居中 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px; } div:last-child {
height: 100px;
width: 100px;
background-color: blueviolet;
/* 過渡時間1s,應該放這裡，而不是:hover上面 */
transition: 1s;
/* 基點改在右下 */
transform-origin: bottom right ;
} div:last-child:hover {
transform: skewX(60deg);
} </style>
</head> <body>
<main>
<div></div>
<div></div>
</main>
</body> </html>
程式碼示例
三維旋轉
三維旋轉需要新增Y軸的基點，還是老規矩，Y軸的基點不能使用百分比。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} main {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center; /* 使用 transform-style 用於控制3d透視 */
transform-style: preserve-3d;
/* 為了更好的視覺效果，我們給main容器做一個透視 ,並且讓它按照X軸旋轉-45度 */
transform: perspective(900px) rotateX(-45deg); /* 為了設定第一個div的中心點，所以這裡設定一個定位，讓子元素的絕對定位參照該元素進行偏移 */
position: relative;
} div {
height: 100px;
width: 210px;
background-color: blueviolet; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 14px; /* 過渡時間2s,應該放這裡，而不是:hover上面 */
transition: 2s;
/* 基點 */
transform-origin: right center 100px; } main:hover div {
/* X/Y/Z */
transform: rotate3d(1,1,1,720deg);
} </style>
</head> <body>
<main>
<div>X right/Y center/Z 100px 720°</div>
</main>
</body> </html>
程式碼示例
新年賀卡
使用變形基點，然後加上旋轉元素即可。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
} body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
} div {
width: 200px;
height: 150px;
background: #fa7d09; display: flex;
justify-content: center;
align-items: center; color: #fff;
font-size: 25px;
position: relative;
transform-style: preserve-3d;
transform: perspective(600px) rotateX(35deg) rotateY(15deg);
} div:after {
content: "新年";
height: 100%;
width: 50%;
position: absolute;
background-color: #fa1616;
left: 0;
transition: 1s;
transform-origin: center left; display: flex;
justify-content: flex-end;
align-items: center; } div:before {
content: "快樂";
height: 100%;
width: 50%;
position: absolute;
background-color: #fa1616;
right: 0;
transition: 1s;
transform-origin: center right; display: flex;
justify-content: flex-start;
align-items: center; } div:hover::before{
transform: rotateY(180deg);
} div:hover::after{
transform: rotateY(-180deg);
} </style>
</head> <body>
<div>祝你年年有餘</div>
</body> </html>
程式碼示例
動感選單
這個應該是最難的一個了，那麼首先我們要有一個大圓。
滑鼠放上去之後所有的小圓跟隨大圓的中心點旋轉轉出來，然後小圓也進行旋轉，圍繞自身的中心點。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_b2p42vds2na.css">
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} nav {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer; }
nav::before{
content:"";
background: #e74c3c;
border-radius: 50%; width: 200px;
height: 200px; position: absolute;
box-shadow: 3px 3px 0px #34495e;
} nav::after{
content:"點我";
background: #e74c3c;
border-radius: 50%; width: 200px;
height: 200px;
display: flex; justify-content: center;
align-items: center;
position: absolute;
font-size: 3em;
color: #fff; } nav:hover ul{
transform: scale(1);
} ul {
transition: .5s;
transform: scale(0);
width: 300px;
height: 300px; border-radius: 50%; } ul li { width: 80px;
height: 80px;
background: #e49;
border-radius: 50%; position: absolute;
display: flex;
justify-content: center;
align-items: center; font-size: 2em;
color: #fff; transition: 1s;
transform-origin: 150px 150px; } ul li span{
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
} ul li span i{
font-size: 1.6em !important;
} nav:hover li:nth-of-type(1) {
transform: rotate(60deg);
} nav:hover li:nth-of-type(2) {
transform: rotate(120deg);
} nav:hover li:nth-of-type(3) {
transform: rotate(180deg);
} nav:hover li:nth-of-type(4) {
transform: rotate(240deg);
} nav:hover li:nth-of-type(5) {
transform: rotate(300deg);
} nav:hover li:nth-of-type(6) {
transform: rotate(360deg);
} /* 解決小圖示傾斜 */
nav:hover li:nth-of-type(1) span {
transform: rotate(300deg);
} nav:hover li:nth-of-type(2) span {
transform: rotate(600deg);
} nav:hover li:nth-of-type(3) span {
transform: rotate(900deg);
} nav:hover li:nth-of-type(4) span {
transform: rotate(1200deg);
} nav:hover li:nth-of-type(5) span {
transform: rotate(1500deg);
} nav:hover li:nth-of-type(6) span {
transform: rotate(1800deg);
}
</style>
</head> <body> <nav>
<ul>
<li><span><i class="iconfont icon-dianhua"></i></span></li>
<li><span><i class="iconfont icon-dingbudaohang-zhangh"></i></span></li>
<li><span><i class="iconfont icon-shezhi"></i></span></li>
<li><span><i class="iconfont icon-lianxiren"></i></span></li>
<li><span><i class="iconfont icon-shoucang"></i></span></li>
<li><span><i class="iconfont icon-ziliao"></i></span></li>
</ul>
</nav> </body> </html>
程式碼示例
透視景深
perspective
使用 perspective 來控制元素的透視景深
perspective 規則為舞臺元素控制景深， perspective 屬性為控制單個元素
舞臺透視
perspective 規則用於將父級整個做為透視元素，會造成裡面的每個子元素的透視是不一樣的。就像現實中擺一排杯子，是使用統一透視的，每個杯子的透視不一樣，造成有大有小。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} main{
width: 400px;
height: 200px;
/* 給整個臺子做透視 */
perspective:200px ;
position: relative;
border: solid 5px silver; display: flex;
justify-content: center;
align-items: center;
} main div{
width: 50%;
height: 50%;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 20px; transform: rotateY(60deg);
} </style>
</head>
<body>
<main>
<div>車1</div>
<div>車2</div>
</main>
</body>
</html>
程式碼示例
單獨透視
perspective 函式用於為元素設定單獨透視，下面是為元素單獨設定透視引數，每個元素的透視效果是一樣的。
<!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>
* {
padding: 0;
margin: 0;
list-style: none;
} body { display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
} main {
width: 400px;
height: 200px; position: relative;
border: solid 5px silver; display: flex;
justify-content: center;
align-items: center;
} main div {
width: 50%;
height: 50%;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 20px; /* 給每個車做透視，現在每輛車都以相同的角度對著你 */
transform: perspective(100px) rotateY(60deg);
} </style>
</head> <body>
<main>
<div>車1</div>
<div>車2</div>
</main>
</body> </html>
程式碼示例
立方體
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
} body {
background: #34495e;
} main {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: 50% 50% 50px;
transform: translate(-50%, -50%) rotateY(0deg);
transition: 2s;
} main:hover {
transform: translate(-50%, -50%) rotate3d(1, 1, 0, 180deg);
} div {
position: absolute;
width: 200px;
height: 200px;
background: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
} div:nth-child(1) {
transform-origin: right;
background: #1abc9c;
transform-origin: bottom;
transform: translateY(-200px) rotateX(-90deg);
opacity: .8;
} div:nth-child(2) {
transform-origin: right;
background: #27ae60;
transform-origin: top;
transform: translateY(200px) rotateX(90deg);
opacity: .8;
} div:nth-child(3) {
transform-origin: bottom;
background: #e67e22;
transform-origin: right;
transform: translateX(-200px) rotateY(90deg);
opacity: .8;
} div:nth-child(4) {
transform-origin: top;
background: #8e44ad;
transform-origin: left;
transform: translateX(200px) rotateY(-90deg);
opacity: .8;
} div:nth-child(5) {
transform-origin: left bottom;
background: #ecf0f1;
opacity: .8;
} div:nth-child(6) {
transform-origin: left bottom;
background: #ecf0f1;
opacity: .5;
transform: translateZ(200px);
} </style>
</head>
<body> <main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main> </body>
</html>
程式碼示例
3D透視
transform-style
使用 transform-style 用於控制3d透視。
應用於舞臺即變形元素的父級元素
設定
overflow:visible時preserve-3d才無效
| 選項 | 說明 |
|---|---|
| flat | 2D平面舞臺 |
| preserve-3d | 3D透視舞臺 |
三維圖集
<!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>
body {
background: #34495e;
} main {
position: absolute;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform-origin: center center -300px;
transform: translate(-50%, -50%) rotateX(-45deg);
transition: 2s;
} body:hover main {
transform: translate(-50%, -50%) rotateX(-45deg) rotateY(900deg);
} div {
position: absolute;
width: 100%;
height: 100%;
transform-origin: center center -300px;
overflow: hidden;
background: content-box;
padding: 10px;
opacity: .5;
} div:nth-child(1) {
background-color: #ade498;
transform: rotateY(60deg);
} div:nth-child(2) {
background-color: #d3de32;
transform: rotateY(120deg);
} div:nth-child(3) {
background-color: #ffffdd;
transform: rotateY(180deg);
} div:nth-child(4) {
background-color: #006a71;
transform: rotateY(240deg);
} div:nth-child(5) {
background-color: #fe91ca;
transform: rotateY(300deg);
} div:nth-child(6) {
background-color: #cffe0f;
transform: rotateY(360deg);
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
程式碼示例
觀看視角
perspective-origin
perspective-origin用於控制視線的落點，就像我們眼睛看物體時的聚焦點。可以理解眼鏡看物體的位置，比如看一臺汽車，是在看車頭左邊看還是車頭右邊看。
需要設定 perspective 透視後才可以看到效果。
一般設定在舞臺元素上來控制子元素
| 取值 | 說明 |
|---|---|
| x-axis | 定義該檢視在 x 軸上的位置。預設值：50%。可能的值：left、center、right、length、% |
| y-axis | 定義該檢視在 y 軸上的位置。預設值：50%。可能的值：top、center、bottom、length、% |
隱藏背面
backface-visibility
使用 backface-visibility 用於控制是否可以看到元素的背面。
一般設定在元素上而不是舞臺元素上
需要舞臺元素（父級元素）設定 transform-style: preserve-3d
| 選項 | 說明 |
|---|---|
| visible | 背面可見 |
| hidden | 背面隱藏 |
翻轉卡片
下面使用隱藏背面與透視技術製作的翻轉卡片效果。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} main {
position: absolute;
width: 100vw;
height: 100vh;
transition: 2s;
transform-style: preserve-3d;
} main.login {
transform: perspective(900px) rotateY(0deg);
} main.register {
transform: perspective(900px) rotateY(180deg);
} div {
position: absolute;
width: 100%;
height: 100%;
font-size: 5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: 2s;
text-transform: uppercase;
color: white;
} div span {
text-transform: lowercase;
letter-spacing: .2em;
font-size: .2em;
color: #2c3e50;
} div:nth-child(1) {
background: #2ecc71;
transform: rotateY(0deg);
} div:nth-child(2) {
background: #e74c3c;
transform: rotateY(180deg);
} nav {
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 30px;
} nav a {
padding: 10px;
text-decoration: none;
font-size: 1em;
background: #000;
color: white;
margin-right: 10px;
cursor: pointer;
left: 0;
top: 0;
}
</style>
</head> <body>
<main>
<div>
<i class="fa fa-home" aria-hidden="true"></i>
login
<span>houdunren.com</span>
</div>
<div>
<i class="fa fa-user" aria-hidden="true"></i>
register
<span>houdunren.com</span>
</div>
</main>
<nav>
<a href="javascript:;" onclick="change('login')">登入</a>
<a href="javascript:;" onclick="change('register')">註冊</a>
</nav>
</body> <script>
function change(t) {
switch (t) {
case 'login':
$("main").removeClass().addClass('login');
break;
case 'register':
$("main").removeClass().addClass('register');
break;
}
}
</script> </html>
程式碼示例