前言
在開始介紹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>