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

大牛帶你玩轉 CSS3 3D 技術

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個piecepiece-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.約束資料的有效性(唯一性等) 增加索引有前提條件:索引本