2. 程式人生 > >大牛帶你玩轉 CSS3 3D 技術

大牛帶你玩轉 CSS3 3D 技術

阿新 • • 發佈：2019-07-26

css3的3d起步

要玩轉css3的3d，就必須瞭解幾個詞彙，便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看螢幕上的2D事物，從而展現3D的效果。旋轉則不再是2D平面上的旋轉，而是三維座標系的旋轉，就包括X軸，Y軸，Z軸旋轉。平移同理。

當然用理論來說明，估計你還不明白。下面是3個gif：

  • 沿著X軸旋轉

  • 沿著Y軸旋轉

  • 沿著Z軸旋轉

旋轉應該沒問題了，那理解平移起來就比較容易了，就是在在X軸、Y軸、z軸移動。

你可能會說透視比較不好理解，下面我介紹一下透視的幾個屬性。

perspective

perspective

英文名便是透視，沒有這東西就沒辦法形成3D效果，但是這個東西是怎麼讓我們瀏覽器形成3D 效果的呢，可以看下面這張圖，其實學過繪畫的應該知道透視關係，而這裡就是這個道理。

但是在css裡它是有數值的，例如perspective: 1000px這個代表什麼呢？我們可以這樣理解，如果我們直接眼睛靠著物體看，物體就超大佔滿我們的視線，我們離它距離越來越大，它在變小，立體感也就出來了是不是，其實這個數值構造了一個我們眼睛離螢幕的距離，也就構造了一個虛擬3D假象。

perspective-origin

由上面我們瞭解了perspective，而加上了這個origin是什麼，我們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，我們的視點的不同位置就決定了我們看到的不同景象，預設是中心，為perspectice-origin: 50% 50%

,第一個數值是 3D 元素所基於的 X 軸，第二個定義在 y 軸上的位置

當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。必須與 perspective 屬性一同使用，而且隻影響 3D 轉換元素。(W3school)

transform-style

perspective又來了，沒錯，它是css中3D的關鍵，transform-style預設是flat，如果你要在元素上視線3D效果的話，就必須用上transform-style: preserve-3d,否則就只是平面的變換，而不是3D的變換

手把手帶你玩轉css3-3d

以上我們稍微瞭解概念，下面就開始實戰吧！

我們看一個效果，是不是很酷炫~

如果圖片載入不出來，就直接訪問https://bupt-hjm.github.io/css3-3d/

第一步：html結構

很簡單的一個容器包裹著一個裝了6個piece的piece-box

<div class="container">
    <div class="piece-box">
        <div class="piece piece-1"></div>
        <div class="piece piece-2"></div>
        <div class="piece piece-3"></div>
        <div class="piece piece-4"></div>
        <div class="piece piece-5"></div>
        <div class="piece piece-6"></div>
    </div>
</div>

第二步： 加上必要的3D屬性，進入3D世界

通過上面的講解，應該對perspective比較熟悉了吧,

/*容器*/
.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
/*piece盒子*/
 .piece-box {
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

第三步：加入必要的樣式

/*容器*/
.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
/*piece盒子*/
.piece-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 300px auto;
    perspective-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/*piece通用樣式*/
.piece {
    position: absolute;
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0.5;

}
.piece-1 {
    background: #FF6666;

}
.piece-2 {
    background: #FFFF00;
}
.piece-3 {
    background: #006699;
}
.piece-4 {
    background: #009999;
}
.piece-5 {
    background: #FF0033;
}
.piece-6 {
    background: #FF6600;
}

當然，在你完成這步之後你還是隻看到一個正方形，也就是我們的piece-6,因為我們的3Dtransform還沒開始

第四步：3D變換來襲

首先是實現走馬燈，我們先不要讓它走，先實現燈部分。

如何實現呢？因為要構成一個圓，圓是360度，而我們有6個piece，那麼，很容易想到，我們需要把每一個piece以遞增60度的方式rotateY，就變成如下

如何把他們從中心拉開呢？

這裡我們還要注意一點，在我們使元素繞Y軸旋轉以後，其實X軸和Z軸也會跟著旋轉，所所以正方體的每個面的垂直線還是Z軸，我們就只需要改變下translateZ的值,而當translateZ為正的時候，就朝著我們的方向走來，這樣就可以拉開了

但是拉開的距離如何衡量？

是不是一目瞭然了~

下面我們再修改下css

.piece-1 {
    background: #FF6666;
    -webkit-transform: rotateY(0deg) translateZ(173.2px);
    -ms-transform: rotateY(0deg) translateZ(173.2px);
    -o-transform: rotateY(0deg) translateZ(173.2px);
    transform: rotateY(0deg) translateZ(173.2px);

}
.piece-2 {
    background: #FFFF00;
    -webkit-transform: rotateY(60deg) translateZ(173.2px);
    -ms-transform: rotateY(60deg) translateZ(173.2px);
    -o-transform: rotateY(60deg) translateZ(173.2px);
    transform: rotateY(60deg) translateZ(173.2px);
}
.piece-3 {
    background: #006699;
    -webkit-transform: rotateY(120deg) translateZ(173.2px);
    -ms-transform: rotateY(120deg) translateZ(173.2px);
    -o-transform: rotateY(120deg) translateZ(173.2px);
    transform: rotateY(120deg) translateZ(173.2px);
}
.piece-4 {
    background: #009999;
    -webkit-transform: rotateY(180deg) translateZ(173.2px);
    -ms-transform: rotateY(180deg) translateZ(173.2px);
    -o-transform: rotateY(180deg) translateZ(173.2px);
    transform: rotateY(180deg) translateZ(173.2px);
}
.piece-5 {
    background: #FF0033;
    -webkit-transform: rotateY(240deg) translateZ(173.2px);
    -ms-transform: rotateY(240deg) translateZ(173.2px);
    -o-transform: rotateY(240deg) translateZ(173.2px);
    transform: rotateY(240deg) translateZ(173.2px);
}
.piece-6 {
    background: #FF6600;
    -webkit-transform: rotateY(300deg) translateZ(173.2px);
    -ms-transform: rotateY(300deg) translateZ(173.2px);
    -o-transform: rotateY(300deg) translateZ(173.2px);
    transform: rotateY(300deg) translateZ(173.2px);
}

是不是已經實現了走馬燈了？

第五步：animation讓3D動起來

要實現走馬燈動，其實很簡單，我們只要在piece-box上加上旋轉動畫就行了,5s完成動畫，從0度旋轉到360度

/*piece盒子*/
.piece-box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 300px auto;
    perspective-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: pieceRotate 5s;
    -moz-animation: pieceRotate 5s; /* Firefox */
    -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
    -o-animation: pieceRotate 5s ; /* Opera */
}
/*走馬燈動畫*/
@keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}
/* Opera */
@-o-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);}
}

這裡就不放gif了~hhh是不是實現了酷炫的效果，還沒結束哦~更酷炫的正方體組裝

正方體，其實也不難實現，我這裡就不很詳細說了，你首先可以想象一個面，然後去拓展其他面如何去實現，比如我們把正方體的前面translateZ(100px）讓它靠近我們100px,然後後面translateZ(-100px）讓它遠離我們100px,左邊是先translateX(-100px再rotateY(90deg),右邊就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要我們寫進動畫，一切就大功告成。

css就為如下，以下就只放piece1，其他讀者可以自己類比實現，或者看我的原始碼

.piece-1 {
     background: #FF6666;
     -webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);
     animation: piece1Rotate 5s 5s;
     -moz-animation: piece1Rotate 5s 5s; /* Firefox */
     -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
     -o-animation: piece1Rotate 5s 5s; /* Opera */
     -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
      animation-fill-mode: forwards;
 }
/*front*/
 @keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Firefox */
 @-moz-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Safari and Chrome */
 @-webkit-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }
 /* Opera */
 @-o-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
     -ms-transform: rotateY(0deg) translateZ(173.2px);
     -o-transform: rotateY(0deg) translateZ(173.2px);
     transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
     -ms-transform:  rotateY(0deg) translateZ(100px);
     -o-transform: rotateY(0deg)  translateZ(100px);
     transform:  rotateY(0deg) translateZ(100px);}
 }

細心的讀者可以發現我用了一個animation-fill-mode: forwards;,這個其實就是讓這些piece保持動畫最後的效果，也就是正方體的效果，讀者可以不加試試看，那還是會恢復原樣。

最後就是正方體的旋轉了，前面我們的容器已經用過animation了,讀者可能會想我再加個class放animaiton不就行了，hhh，animaiton會覆蓋掉前面的，那前面的走馬燈的動畫就沒了，所以在html結構中，我再加了一個box包裹piece, 如下

<div class="container">
    <div class="piece-box">
        <div class="piece-box2"><!--新加的容器-->
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>
</div>

動畫上我們可以控制正方體動畫的延時時間，就是等到正方體組裝完成後再開始動畫

animation: boxRotate 5s 10s infinite;第一個5s是動畫時長，第二個10s是延時時間，然後我們讓正方體的旋轉，繞X軸從0度到360度,繞Y軸也0到Y軸360度。

.piece-box2 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: boxRotate 5s 10s infinite;
    -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
    -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
    -o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方體旋轉動畫*/
@keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Opera */
@-o-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}

好啦，結束啦！

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助你學好前端！

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選：

相關推薦

大牛帶你玩轉 CSS3 3D 技術

css3的3d起步 要玩轉css3的3d，就必須瞭解幾個詞彙，便是透視(perspective)、旋轉(rotate)和移動(tr

Top團隊大牛帶你玩轉Android效能分析與優化

第1章 課程導學與學習指南 效能優化是高階工程師必備的技能，本課程將帶你由表及裡學到國內Top團隊對效能問題的體系化解決方案，滿滿的乾貨讓你輕鬆晉級高階工程師。  1-1 課前必讀（不看會錯過一個億）  1-2 課程導學試看

手把手教你玩轉 CSS3 3D 技術（轉載）

是不是 col 默認 占滿 概念 ebe 說明 adb relative css3的3d起步 要玩轉css3的3d，就必須了解幾個詞匯，便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看屏幕上的2D事物，從而展現3

11位大咖帶你玩轉WebRTC開發（內附PPT資料下載）

迎著上海舒爽的小雨，LiveVideoStack攜手英特爾、阿里巴巴、愛奇藝等11位大咖講師共同帶來了WebRTC開發及實踐專題，與參會嘉賓一同分享了基於WebRTC技術的英特爾協同通訊開發套件的功能、願景、硬體產品選取，以及融合機器學習和VR/AR的技術發展前瞻，並對搭建實時通訊平臺的技術難點、解決之道以

跟阿里大牛撈乾貨：2019年帶你玩轉人工智慧、大資料

導讀：2019年，你都立了哪些flag？等一年之後回頭看看，這些flag都能拔掉嗎？其實新的一年已經過去一週多了，這一週你是怎樣過的，有沒有一點小小的進步？   為了讓你的2019年過得充實，不虛度，華章計算機小編今天推薦10本書，作者來自於阿里的技術大牛，內容都是跟當前持續火爆的大資料行業相關

TOP 互聯網公司大牛帶你打造高逼格自動化平臺

運維 運維開發 講師介紹：Panda 老師 前豆瓣運維工程師。經歷了運維工程師到運維研發工程師的轉變。 現就職創業公司，引入豆瓣的運維平臺思想，完成新公司的自動化運維平臺的開發和建設。對運維工程師轉運維研發的困惑和痛點深有感觸，樂於分享自己轉型中的五味雜陳，51Reboot 金牌講師。 分享內容：

1分鐘帶你玩轉Kafka

Kafka 分布式 消息服務 說起Kafka，許多使用者對它是又愛又恨。Kafka是一種分布式的、基於發布/訂閱的消息系統，其極致體驗讓人欲罷不能，但操心的運維、復雜的安全策略、可靠性易用性的缺失、算不上極致的性能發揮、並不豐富的消息服務功能，仍需要使用者付出諸多的背後工作。即使你是Kafka老手

BAT大牛 帶你深度剖析Android 10大開源框架

安卓第1章 課程介紹(提供bat內推和簡歷指導)1-1 課程導學第2章 Okhttp網絡庫深入解析和相關面試題分析2-1 okhttp框架流程分析2-2 okhttp同步請求方法2-3 okhttp異步請求方法2-4 okhttp同步請求流程和源碼分析2-5 okhttp異步請求流程和源碼分析-12-6 ok

資深程序員帶你玩轉深度學習中的正則化技術（附Python代碼）！

c51 進行 ros batch num 簡單的 oat 深度學習 repr 目錄 1. 什麽是正則化？ 2. 正則化如何減少過擬合？ 3. 深度學習中的各種正則化技術： L2和L1正則化 Dropout 數據增強(Data augmentation) 提前停止(Ear

百曉生帶你玩轉linux系統服務搭建系列----DNS服務的搭建一（正向解析）

home 主配置文件 baidu 安裝環境 圖片 搭建 href ace eid DNS正向解析的搭建 實驗環境系統環境：centos6.5 安裝DNS環境軟件包rpm -ivh /mnt/Packages/bind-9.8.2-0.17.rc1.el6_4.6.x86_

百曉生帶你玩轉linux系統服務搭建系列----pxe遠程安裝服務器的搭建及無人值守安裝

conf fig ces sys 鏡像文件 mount size set blog 實驗環境系統環境：centos6.5：程安裝服務器WIN7：客戶端一、pxe遠程安裝服務器的搭建 安裝並開啟需要的服務，tftp,ftp,dhcp。1） yum -y install t

百曉生帶你玩轉linux系統服務搭建系列----SSH遠程訪問及控制

登入 conf rsa nag 系列 配置 上傳 我們 shel 實驗環境：linux centos 6.5*2實驗目的：用戶登錄控制及密鑰對驗證 sshd服務默認允許root用戶登錄，當在Internet中使用時這是非常不安全的。普遍的做法是先以普通用戶遠程登入，進入安全

百曉生帶你玩轉linux系統服務搭建系列----構建虛擬ApacheWeb主機

ESS host mon conf 圖片 common roo echo 端口 虛擬Web主機指的是在同一臺服務器中運行多個Web站點，其中的每一個站點實際上並不獨自占用整個服務器，因此被稱為“虛擬”Web主機。通過Web主機服務可以充分利用服務器的硬件資源，從而大大降低網

架構師帶你玩轉分布式鎖

src 效率 獲取鎖 當我 mysql 代碼 red 目錄 在線 　　大多數互聯網系統都是分布式部署的，分布式部署確實能帶來性能和效率上的提升，但為此，我們就需要多解決一個分布式環境下，數據一致性的問題。 　　當某個資源在多系統之間，具有共享性的時候，為了保證大家訪問這個資

帶你玩轉Logview: MaxCompute Logview參數詳解和問題排查

磁盤 兩種 同時 col mage proc ins NPU 優化 摘要： 對於Logview上的諸多參數信息，究竟應該怎麽“撥開雲霧”，發現問題所在呢？又如何通過Logview了解每個instance、task運行狀態及資源占用情況，如何分析執行計劃，分析query存在問

亞洲誠信帶你玩轉［2018國家網絡安全宣傳周］上海地區活動！

新的 信息安全 信用卡 對手 禮物 徹底 應用程序 活動 通話 為提升全社會的網絡安全意識和安全防護技能，根據中央網信辦統一部署，2018年國家網絡安全宣傳周於9月17日至23日在全國範圍內舉辦，此次宣傳周主題為“網絡安全為人民，網絡安全靠人民”。上海地區的活動由市委網信

九大工具助你玩轉Java性能優化

www 優化 pat file tools strong pro n) 包含 在這篇文章中，我會帶著大家一起看一下9個可以幫助我們優化Java性能的工具。有一些我們已經在IDR Solutions中使用了，而另外一些有可能在個人項目中使用。 NetBeans Profil

六天帶你玩轉mysql資料庫--第四天筆記

回顧： 列屬性：主鍵，自增長，唯一鍵 關係：一對一，一對多，多對多 正規化：規範資料庫的設計，三層正規化 1NF：欄位設計必須符合原子性 2NF：不存在部分依賴（沒有複合主鍵） 3NF：不存在傳遞依賴（實體單獨建表） 逆規範化：效率與磁碟空間的博弈 高階資料操作： 新增資料：主

六天帶你玩轉mysql資料庫-- 第三天筆記（下）

資料的高階操作： 資料操作：增刪改查 新增資料： 基本語法： insert into 表名 [(欄位列表)] values（值列表）; 在資料插入的時候，假設主鍵對應的值已經存在，插入一定會失敗。 主鍵衝突： 當主鍵存在衝突的時候（Duplicate ke

六天帶你玩轉mysql資料庫--第三天筆記（中）

索引： 幾乎所有的索引都是建立在欄位之上。 索引：系統根據某種演算法將已有的資料（未來可能新增的資料），單獨建立一個檔案，檔案能夠實現快速的匹配資料， 並且能夠快速的找到對應表中的記錄。索引的意義在於： 1.提升查詢資料的效率 2.約束資料的有效性（唯一性等） 增加索引有前提條件：索引本