當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础班笔记(三)

發(fā)布時間：2024/1/8 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础班笔记(三) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?web前端劍法之css

🔥web前端劍法之css地址

🔥CSS基礎(chǔ)班筆記(一)	https://blog.csdn.net/Augenstern_QXL/article/details/115560532
🔥CSS基礎(chǔ)班筆記(二)	https://blog.csdn.net/Augenstern_QXL/article/details/115560502
🔥CSS基礎(chǔ)班筆記(三)	https://blog.csdn.net/Augenstern_QXL/article/details/115726577
🔥CSS進階班筆記(四)	https://blog.csdn.net/Augenstern_QXL/article/details/119172527
🔥CSS進階班筆記(五)	https://blog.csdn.net/Augenstern_QXL/article/details/120374974

?目錄總覽

1、新增選擇器🔥

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標(biāo)元素。

屬性選擇器
結(jié)構(gòu)偽類選擇器
偽元素選擇器

1.1、屬性選擇器🔥

屬性選擇器可以根據(jù)元素特定的屬性來選擇元素，這樣就可以不用借助于類或者id選擇器

選擇符簡介

E[att]	選擇具有att屬性的E元素
E[att=“val”]	選擇具有att屬性且屬性值等于val的E元素
E[att^=“val”]	匹配具有att屬性且值以val開頭的E元素
E[att$=“val”]	匹配具有att屬性且值以val結(jié)尾的E元素
E[att*=“val”]	匹配具有att屬性且值中含有val的E元素

利用屬性選擇器就可以不借助于類或者id選擇器

<head> <style>input[value] {color: pink;}</style> </head><body><input type="text" value="請輸入用戶名"><input type="text"> </body>

屬性選擇器還可以選擇屬性 = 值的某些元素

<head> <style>input[type=text] {color: pink;}</style> </head><body><input type="text" name="" id=""><input type="password" name="" id=""></body>

屬性選擇器可以選擇屬性值開頭的某些元素

<head> /* 選擇首先是div，然后具有class屬性，并且是icon開頭的值 */<style> div[class^=icon] {color: pink;}</style> </head><body><div class="icon1">小圖標(biāo)1</div><div class="icon2">小圖標(biāo)2</div><div class="icon3">小圖標(biāo)3</div><div class="icon4">小圖標(biāo)4</div></body>

屬性選擇器可以選擇屬性值結(jié)尾的某些元素

<head><style>section[class$=data] {color: pink;}</style> </head><body><section class="icon1-data">1</section><section class="icon2-data">2</section><section class="icon3-data">3</section> </body>

注意：類選擇器，屬性選擇器，偽類選擇器，權(quán)重為10

1.2、結(jié)構(gòu)偽類選擇器🔥

結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇元素
常用于根據(jù)父級選擇器選擇里面的子元素

選擇符簡介

E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中最后一個E元素
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定類型E的第一個
E:last-of-type	指定類型E的最后一個
E:nth-of-type（n）	指定類型E的第n個

①、E:first-child 和E:last-child

<head><style>/* 1.選擇ul里面的第一個孩子小li */ul li:first-child {background-color: pink;}/* 2.選擇ul里面的最后一個孩子小li */ul li:last-child {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul>

②、nth-child(n)

nth-child(n)選擇某個父級元素的一個或多個特定的子元素（重點）

n可以是數(shù)字，關(guān)鍵字和公式

n如果是數(shù)字，就是選擇第n個子元素，里面數(shù)字從1開始

n可以是關(guān)鍵字：even 偶數(shù)，odd奇數(shù)

n可以是公式：常見的公式如下（如果n是公式，則從0開始計算，但是第0個元素或者超出了元素的個數(shù)會被忽略）

公式取值

2n	偶數(shù)（等價于even）
2n+1	奇數(shù)（等價于odd）
5n	5 10 15 …（5的倍數(shù)）
n+5	從第5個開始（包含第五個）到最后
-n+5	前5個（包含第5個）

<head><style>/* 選擇ul里面的第2個孩子小li */ul li:nth-child(2) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul> </body> <style>/* 1.把所有的偶數(shù) even的孩子選出來 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇數(shù) odd的孩子選出來 */ul li:nth-child(odd) {background-color: gray;}/* 3.nth-child(n) 從0開始每次加1 往后面計算這里面必須是n 不能是其他的字母選擇了所有的孩子*//* ol li:nth-child(n) {background-color: pink;} *//* 4.nth-child(2n)母選擇了所有的偶數(shù)孩子等價于 even*//* ol li:nth-child(2n) {background-color: pink;}ol li:nth-child(2n+1) {background-color: skyblue;} *//* ol li:nth-child(n+3) {background-color: pink;} */ol li:nth-child(-n+3) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul><ol><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ol> </body>

③、E:first-of-type和E:last-of-type

E:first-of-type指定類型E的第一個

E:last-of-type

指定類型E的最后一個

<head><style>ul li:first-of-type {background-color: pink;}ul li:last-of-type {background-color: pink;}ul li:nth-last-child(2) {background-color: pink;}</style> </head><body><ul><li>我是第1個孩子</li><li>我是第2個孩子</li><li>我是第3個孩子</li><li>我是第4個孩子</li><li>我是第5個孩子</li><li>我是第6個孩子</li><li>我是第7個孩子</li><li>我是第8個孩子</li></ul> </body>

④、區(qū)別

nth-child(n)和nth-of-type(n)區(qū)別?
nth-child 對父元素里面所有孩子排序選擇(序號是固定的)，先找到第n個孩子，然后看看是否和E匹配
nth-of-type 對父元素里面指定子元素進行排序選擇，先去匹配E,然后再根據(jù)E 找第n個孩子

⑤、小結(jié)

結(jié)構(gòu)偽類選擇器一般用于選擇父級里面的第幾個孩子

nth-child 對父元素里面所有孩子排序選擇（序號是固定的），先找到第n個孩子，然后看看是否和E匹配

nth-of-type 對父元素里面指定子元素進行排序選擇，先去匹配E，然后再根據(jù)E找第n個孩子

關(guān)于nth-child(n)，我們要知道n是從0開始計算的，要記住常用的公式

如果是無序列表，我們肯定用 nth-child 更多

類選擇器，屬性選擇器，偽類選擇器，權(quán)重為10

1.3、偽元素選擇器🔥

偽元素選擇器可以幫我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)

選擇符簡介

::before	在元素內(nèi)部的前面插入內(nèi)容
::after	在元素內(nèi)部的后面插入內(nèi)容

注意：

before 和 after 創(chuàng)建一個元素，但是是屬于行內(nèi)元素

before和after 都是一個盒子，都作為父元素的孩子

新創(chuàng)建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素

語法：

element::before {}

before是放在內(nèi)容的前面，after是放在了內(nèi)容的后面

<head><style>div {width: 200px;height: 200px;background-color: pink;}/* div::before 權(quán)重是2 */div::before {/* 這個content是必須要寫的 */content: '我';}div::after {content: '小豬佩奇';}</style> </head><body><div>是</div>

before 和 after 必須有 content 屬性
before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
偽元素選擇器 和 標(biāo)簽選擇器 一樣，權(quán)重為1

2、CSS3盒子模型🔥

CSS3 中可以通過box-sizing 來指定盒模型
有2個值：這樣我們計算盒子大小的方式就發(fā)生了改變
- content-box
- border-box

2.1、content-box

box-sizing: content-box;

第一種情況是 CSS 的盒子模型，盒子大小為 width + padding + border
此種情況盒子大小為寬度 + 內(nèi)邊距 + 邊框，這也是我們之前寫盒子所默認(rèn)的

2.2、border-box🔥

box-sizing: border-box;

第二種情況是 CSS3 的盒子模型，盒子大小為 width
此種情況盒子大小為寬度，不包括內(nèi)邊距和邊框，這樣 padding 和 border 就不會撐大盒子了(前提是 padding 和 border 不會超過 width 寬度)
我們可以在以后的 css 通配符中添加 CSS3 盒子模型

* {margin: 0;padding: 0;box-sizing: border-box;/* 這樣的話padding和border就不會撐大盒子了 */ }

3、C3其他特性

3.1、濾鏡filter

filter: CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素(圖片變模糊)
語法：
filter: 函數(shù)();
模糊處理：blur,數(shù)值越大越模糊

<head><style>img {/* blur 是一個函數(shù)，小括號里面的數(shù)值越大，圖片越模糊，注意數(shù)值要加px單位 */filter: blur(5px);}</style> </head><body><img src="images/pink.jpg" alt=""> </body>

3.2、calc函數(shù)

calc() 此CSS函數(shù)讓你在聲明CSS屬性值時執(zhí)行一些計算（計算盒子寬度 width: calc 函數(shù)）
width:calc(100% - 80px);
括號里面可以使用 + - * / 來進行計算

<head> <style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: 150px; *//* son盒子和父親一樣寬，都是100%，son盒子-30px */width: calc(100%-30px);height: 30px;background-color: skyblue;}</style> </head><body><div class="father"><div class="son"></div></div> </body>

3.3、transition過渡🔥

過渡（transition) 是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時為元素添加效果
過渡動畫：是從一個狀態(tài)漸漸的過渡到另外一個狀態(tài)
過渡經(jīng)常和：hover一起搭配使用

transition: 要過渡的屬性花費時間運動曲線何時開始

要過渡的屬性：想要變化的 CSS 屬性，寬度高度，背景顏色，內(nèi)外邊距都可以，如果想要所有的屬性都變化過渡，寫一個all就可以。

花費時間：單位是秒(必須寫單位) 比如0.5s

運動曲線：默認(rèn)是ease(可以省略)

何時開始：單位是秒(必須寫單位)，可以設(shè)置延遲觸發(fā)事件，默認(rèn)是0s(可以省略)

過渡的口訣：誰做過渡給誰加

<head><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 變化的屬性花費時間運動曲線何時開始; *//* 如果想要寫多個屬性，利用逗號進行分割 */transition: width 0.5s, height 0.5s;/* 如果想要多個屬性都變化，屬性寫all就可以了 */transition: all 0.5s;}div:hover {width: 400px;height: 200px;background-color: red;}</style> </head><body><div></div> </body>

3.4、2D轉(zhuǎn)換🔥

轉(zhuǎn)換(transform)是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移，旋轉(zhuǎn)，縮放等效果

移動：translate
旋轉(zhuǎn)：rotate
縮放：scale

二維坐標(biāo)系：

2D轉(zhuǎn)換是改變標(biāo)簽在二維平面上的位置和形狀的一種技術(shù)，先來學(xué)習(xí)二維坐標(biāo)系

①移動translate🔥

2D移動是2D轉(zhuǎn)換里面的一種功能，可以改變元素在頁面中的位置，類似定位。

語法：

transform:translate(x,y); /* 或者分開寫 */ transform:translateX(n); transform:translateY(n);transform:translate(100px,100px); /* 如果只移動X軸 */ transform:translate(100px,0); translateX(100px);

定義2D轉(zhuǎn)換中的移動，沿著X和Y軸移動元素

translate 最大的優(yōu)點：不會影響到其他元素的位置

translate 中的百分比單位是相對于自身元素的

translate:(50%,50%);

對行內(nèi)標(biāo)簽沒有效果

②旋轉(zhuǎn)rotate🔥

2D旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時針旋轉(zhuǎn)或者逆時針旋轉(zhuǎn)。

transform: rotate(度數(shù))

rotate 里面跟度數(shù)，單位是 deg 比如 rotate(45deg)

角度為正時，順時針，負(fù)時，為逆時針

默認(rèn)旋轉(zhuǎn)的中心點是元素的中心點

<head><style>img {width: 150px;border-radius: 50%;border: 5px solid pink;/* 過渡寫到本身，誰做動畫給誰加 */transition: all 0.3s;}img:hover {transform: rotate(360deg);}</style> </head><body><img src="#" alt=""> </body>

③旋轉(zhuǎn)中心點transform-origin🔥

2D轉(zhuǎn)換中心點：我們可以設(shè)置元素轉(zhuǎn)換的中心點 transform-origin

transform-origin: x y;

注意后面的參數(shù)x 和 y 用空格隔開

x y 默認(rèn)轉(zhuǎn)換的中心點是元素的中心點(50% 50%)

還可以給x y 設(shè)置像素或者方位名詞(top bottom left right center)

<head><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 1s;/* 1.可以跟方位名詞 ,以左下角為軸進行旋轉(zhuǎn)*/transform-origin: left bottom;}div:hover {transform: rotate(360deg);}</style> </head><body><div></div> </body>

3.5、縮放scale🔥

縮放：scale,只要給元素添加上了這個屬性就能控制它放大還是縮小

transform: scale(x,y);

注意其中的x和y用逗號分割

transform:scale(1,1): 寬和高都放大一倍，相當(dāng)于沒有放大

transform:scale(2,2)：寬和高都放大了2倍

transform:scale(2)：只寫一個參數(shù)，第二個參數(shù)則和第一個參數(shù)一樣，相當(dāng)于 scale(2,2)

transform:scale(0.5,0.5)：縮小

sacle縮放最大的優(yōu)勢：可以設(shè)置轉(zhuǎn)換中心點縮放，默認(rèn)以中心點縮放的，而且不影響其他盒子

<head><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}div:hover {/* 1.里面寫的數(shù)字不跟單位就是倍數(shù)的意思 1就是1倍，2就是2倍 */transform: scale(2, 2);}</style> </head><body><div></div> </body>

3.6、2D轉(zhuǎn)換綜合寫法🔥

同時使用多個轉(zhuǎn)換，其格式為: transform:translate() rotate() scale() 移動-旋轉(zhuǎn)-縮放

其順序會影響轉(zhuǎn)換的效果(先旋轉(zhuǎn)會改變坐標(biāo)軸方向)

當(dāng)我們同時有位移和其他屬性時候，記得要將位移放到最前面

<head> <style>div {width: 200px;height: 200px;background-color: pink;transition: all .5s;}div:hover {/* 我們同時有位移和其他屬性，我們需要把位移放到最前面位移，旋轉(zhuǎn)，縮放*/transform: translate(150px, 50px) rotate(180deg) scale(1.2);}</style> </head><body><div></div> </body>

3.7、2D轉(zhuǎn)換總結(jié)🔥

轉(zhuǎn)換transform 我們簡單理解就是變形有2D 和 3D 之分
我們暫且學(xué)了三個分別是位移旋轉(zhuǎn) 和縮放
2D 移動 translate(x, y) 最大的優(yōu)勢是不影響其他盒子，里面參數(shù)用%，是相對于自身寬度和高度來計算的
可以分開寫比如 translateX(x) 和 translateY(y)
2D 旋轉(zhuǎn) rotate(度數(shù)) 可以實現(xiàn)旋轉(zhuǎn)元素度數(shù)的單位是deg
2D 縮放 sacle(x,y) 里面參數(shù)是數(shù)字不跟單位可以是小數(shù) 最大的優(yōu)勢不影響其他盒子
設(shè)置轉(zhuǎn)換中心點 transform-origin : x y; 參數(shù)可以百分比、像素或者是方位名詞
l當(dāng)我們進行綜合寫法，同時有位移和其他屬性的時候，記得要將位移放到最前

4、C3動畫🔥

動畫 animation是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果。

相比較過渡，動畫可以實現(xiàn)更多變化，更多控制，連續(xù)自動播放等效果。

制作動畫分為兩步：

先定義動畫
再使用（調(diào)用）動畫

4.1、用keyframs定義動畫🔥

用 keyframes 定義動畫（類似定義類選擇器）

@keyframes 動畫名稱 {0%{width:100px;} 100%{width:200px;} }

0% 是動畫的開始，100% 是動畫的完成。這樣的規(guī)則就是動畫序列。
在 @keyframes 中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 “from” 和 “to”，等同于 0% 和 100%。

4.2、使用動畫🔥

div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 調(diào)用動畫 */animation-name: 動畫名稱;/* 持續(xù)時間 */animation-duration: 持續(xù)時間;}

4.3、示例

需求：我們想頁面一打開，一個盒子就從左邊走到右邊

<head> <style>/* 需求：我們想頁面一打開，一個盒子就從左邊走到右邊 *//* 1.定義動畫 */@keyframes move {/* 開始狀態(tài) */0% {transform: translateX(0px);}/* 結(jié)束狀態(tài) */100% {transform: translateX(1000px);}}div {width: 200px;height: 200px;background-color: pink;/* 使用動畫 */animation-name: move;/* 持續(xù)時間 */animation-duration: 2s;}</style> </head><body><div></div> </body>

from to 語法

<head> <style>/* 需求：我們想頁面一打開，一個盒子就從左邊走到右邊 *//* 1.定義動畫 */@keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}}div {width: 200px;height: 200px;background-color: pink;/* 使用動畫 */animation-name: move;/* 持續(xù)時間 */animation-duration: 2s;}</style> </head><body><div></div> </body>

4.4、動畫常用屬性🔥

屬性描述

@keyframes	規(guī)定動畫。
animation	所有動畫屬性的簡寫屬性，除了animation-play-state屬性。
animation-name	規(guī)定@keyframes動畫的名稱。（必須的）
animation-duration	規(guī)定動畫完成一個周期所花費的秒或毫秒，默認(rèn)是0。（必須的）
animation-timing-function	規(guī)定動畫的速度曲線，默認(rèn)是“ease”。
animation-delay	規(guī)定動畫何時開始，默認(rèn)是0。
animation-iteration-count	規(guī)定動畫被播放的次數(shù)，默認(rèn)是1，還有infinite
animation-direction	規(guī)定動畫是否在下一周期逆向播放，默認(rèn)是“normal“,alternate逆播放
animation-play-state	規(guī)定動畫是否正在運行或暫停。默認(rèn)是"running",還有"paused"。
animation-fill-mode	規(guī)定動畫結(jié)束后狀態(tài)，保持forwards回到起始backwards

動畫的簡寫屬性

/* animation：動畫名稱持續(xù)時間運動曲線何時開始播放次數(shù) 是否反方向動畫起始或者結(jié)束的狀態(tài) */animation: myfirst 5s linear 2s infinite alternate;

4.5、動畫簡寫屬性🔥

animation：動畫名稱持續(xù)時間運動曲線何時開始播放次數(shù) 是否反方向動畫起始或者結(jié)束的狀態(tài);

animation: myfirst 5s linear 2s infinite alternate;

簡寫屬性里面不包含 animation-play-state
暫停動畫：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
l想要動畫走回來，而不是直接跳回來：animation-direction: alternate
盒子動畫結(jié)束后，停在結(jié)束位置： animation-fill-mode : forwards

4.6、速度曲線細(xì)節(jié)

animation-timing-function：規(guī)定動畫的速度曲線，默認(rèn)是“ease”

值描述

linear	動畫從頭到尾的速度是相同的。勻速
ease	默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結(jié)束。
ease-in-out	動畫以低速開始和結(jié)束。
steps()	指定了時間函數(shù)中的間隔數(shù)量（步長）

5、3D轉(zhuǎn)換🔥

我們生活的環(huán)境是3D的，照片就是3D物體在2D平面呈現(xiàn)的例子.

3D轉(zhuǎn)換的特點：

近大遠(yuǎn)小。
物體后面遮擋不可見

當(dāng)我們在網(wǎng)頁上構(gòu)建3D效果的時候參考這些特點就能產(chǎn)出3D效果。

5.1、三維坐標(biāo)系🔥

三維坐標(biāo)系其實就是指立體空間，立體空間是由3個軸共同組成的。

x軸：水平向右 注意： x 右邊是正值，左邊是負(fù)值
y軸：垂直向下 注意： y 下面是正值，上面是負(fù)值
z軸：垂直屏幕 注意：往外面是正值，往里面是負(fù)值

3D 轉(zhuǎn)換我們主要學(xué)習(xí)工作中最常用的 3D 位移和 3D 旋轉(zhuǎn)

5.2、3D位移translate3d🔥

3D移動在2D移動的基礎(chǔ)上多加了一個可以移動的方向，就是z軸方向

translform:translateX(100px)：僅僅是在x軸上移動
translform:translateY(100px)：僅僅是在Y軸上移動
translform:translateZ(100px)：僅僅是在Z軸上移動（注意：translateZ一般用px單位）
transform:translate3d(x,y,z)：其中 x、y、z 分別指要移動的軸的方向的距離

因為z軸是垂直屏幕，由里指向外面，所以默認(rèn)是看不到元素在z軸的方向上移動

5.3、透視perspective🔥

透視：在2D平面產(chǎn)生近大遠(yuǎn)小視覺立體，但是只是效果二維的

如果想要在網(wǎng)頁產(chǎn)生3D效果需要透視（理解成3D物體投影在2D平面內(nèi)）
模擬人類的視覺位置，可認(rèn)為安排一只眼睛去看
透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠(yuǎn)成像越小
透視的單位是像素

透視寫在被觀察元素的父盒子上面的

d：就是視距，視距就是一個距離人的眼睛到屏幕的距離。

z：就是 z軸，物體距離屏幕的距離，z軸越大（正值）我們看到的物體就越大

①translateZ🔥

translform:translateZ(100px)：僅僅是在Z軸上移動。
有了透視，就能看到translateZ 引起的變化了
- translateZ：近大遠(yuǎn)小
- translateZ：往外是正值
- translateZ：往里是負(fù)值

5.4、3D旋轉(zhuǎn)rotate3d🔥

3D旋轉(zhuǎn)：3D旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x軸，y軸，z軸或者自定義軸進行旋轉(zhuǎn)。

transform: rotateX(45deg) ：沿著X軸正方向旋轉(zhuǎn)45度
transform: rotateY(45deg) ：沿著Y軸正方向旋轉(zhuǎn)45度
transform: rotateZ(45deg) ：沿著Z軸正方向旋轉(zhuǎn)45度
transform: rotate3d(x,y,z,deg) ：沿著自定義軸旋轉(zhuǎn) deg為角度(了解即可)

xyz是表示旋轉(zhuǎn)軸的矢量，是標(biāo)示你是否希望沿著該軸旋轉(zhuǎn)，最后一個標(biāo)示旋轉(zhuǎn)的角度。

/*沿著X軸旋轉(zhuǎn)45deg*/ transform: rotate3d(1,0,0,45deg) /*沿著對角線旋轉(zhuǎn)45deg*/ transform: rotate3d(1,1,0,45deg)

👉左手準(zhǔn)則①

左手的手拇指指向 x軸的正方向
其余手指的彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向

👉左手準(zhǔn)則②

左手的手拇指指向 y軸的正方向
其余手指的彎曲方向就是該元素沿著y軸旋轉(zhuǎn)的方向（正值）

5.5、3D呈現(xiàn)transform-style🔥

3D呈現(xiàn)：transform-style

控制子元素是否開啟三維立體環(huán)境

transform-style: flat 子元素不開啟3d立體空間默認(rèn)的

transform-style: preserve-3d 子元素開啟立體空間

代碼寫給父級，但是影響的是子盒子

這個屬性很重要

總結(jié)

以上是生活随笔為你收集整理的CSS基础班笔记(三)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 2021年美容师（中级）新版试题及美容师
下一篇：纯CSS实现超美选项卡