CSS變形動畫
前言
在開始介紹CSS變形動畫以前，能夠先了解一下學習了它以後能作什麼，有什麼用，這樣你看這篇文章可能會有一些動力。javascript
學習了CSS變形動畫後，你能夠爲你的頁面作出不少炫酷的效果，如一個3D的魔方，一個很酷的旋轉菜單等等。css
在本章節中將會採用大量的實例進行演示，相信你若是看完這篇文章後寫出的頁面會更加的吸引眼球。html
基礎知識
座標系統
首先咱們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還須要加入一條縱深軸，即Y軸的參與纔有一個3D的視覺感覺。java
那麼如何來理解X,Y,Z這三條軸的關係呢？能夠看一下下面這張圖。jquery
X軸表明水平軸git
Y軸表明垂直軸bootstrap
Z軸表明縱深軸vim
X和Y軸都很是好理解，怎麼理解這個Z軸呢？ide
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>
相關文章
- 1. CSS變形和動畫
- 2. css 動畫（一）transform 變形
- 3. css 圓形動畫
- 4. 11css之動畫css變形函數（transfrom）、過分（transition）、動畫（animation）
- 5. css動畫漸變
- 6. CSS3--變形與動畫
- 7. CSS3動畫變形transition
- 8. Css3動畫與變形
- 9. blender形變動畫製作
- 10. svg 低面圖形的變形動畫
- 更多相關文章...
- • W3C CSS 活動 - W3C 教程
- • ionic 加載動畫 - ionic 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章