2. 程式人生 > >手把手教你玩轉 CSS3 3D 技術（轉載）

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

阿新 • • 發佈：2017-07-07
是不是 col 默認 占滿 概念 ebe 說明 adb relative

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/，覺得可以的話記得給star咯hh

第一步：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，其他讀者可以自己類比實現，或者看我github的源碼

.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);}
}

最後效果，大功告成！

技術分享

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

相關推薦

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

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

大牛帶你玩轉 CSS3 3D 技術

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

手把手教你玩轉12306驗證碼的秘密！

這樣的 隨機數 結構 實現 把手 session 劃分 技術交流 簡單的 12306相信對很多小夥伴都不陌生，假如問你對這個網站的印象的時候，你不是會立即想起那個坑爹的驗證碼，而正是這個驗證碼，也一時間成為小夥伴們討論的話題，今天思夢PHP就給大家帶來他的實現辦法，純屬技術

手把手教你玩轉阿裏雲雙11拼團活動

tar 數據庫 再次 發放 nbsp 新用戶 span mysql 圖片 各位新老用戶們，如果您已經開了團，但是還不知道怎麽玩？小編告訴來告訴你！ 首先，進入活動主頁面，點擊【我要開團】，選擇您想要購買的雲產品進行開團！如果您只想開團不想購買，也可以～ 您開團後將

手把手教你玩轉npm包

【npm是什麼】 官網是這個：https://www.npmjs.com/， 官網介紹：npm is the package manager for javascript， npm是js的包管理器，更多的用於nodejs端。 基本上每種語言都有自己的包管理器，nodejs是

手把手教你玩轉SOCKET模型之重疊I/O篇（上）

手把手教你玩轉SOCKET模型之重疊I/O篇 “身為一個初學者，時常能體味到初學者入門的艱辛，所以總是想抽空作點什麼來盡我所能的幫助那些需要幫助的人。我也希望大家能把自己的所學和他人一起分享，不要去鄙視別人索取時的貪婪，因為最應該被鄙視的是不肯付出時的吝嗇。” -----

Apache Beam實戰指南 | 手把手教你玩轉大數據存儲HdfsIO

https 教你 存儲 http aec apache windows 手把手教你 數據存儲 https://mp.weixin.qq.com/s?__biz=MzU1NDA4NjU2MA==&mid=2247494843&idx=2&sn=0dd2

手把手教你玩轉小程式websocket

第一步：建立一個 WebSocket 連線 wx.connectSocket({ url: "wss://websocket.allhjs.com", }) 第二步：監聽WebSocket連線開啟 wx

手把手教你玩轉Git

文章已託管到GitHub，大家可以去GitHub檢視下載！並搜尋關注微信公眾號 碼出Offer 領取各種學習資料！ 在這裡插入圖片描述 Git應用 一、初識Git 1.1 Git的簡史 同生活中的許多偉大事物一樣，Git 誕生於一個極富紛爭大舉創新的年代。 Linus在1991年建立了開源的L

調試 Dockerfile - 每天5分鐘玩轉 Docker 容器技術（15）

top add font tom middle 程序 ria family 是個 包括 Dockerfile 在內的任何腳本和程序都會出錯。有錯並不可怕，但必須有辦法排查，所以本節討論如何 debug Dockerfile。 先回顧一下通過 Dockerfile 構建鏡像

Dockerfile 常用指令 - 每天5分鐘玩轉 Docker 容器技術（16）

依次 官方文檔 構建 bottom str -s 暴露 工作 12px 是時候系統學習 Dockerfile 了。下面列出了 Dockerfile 中最常用的指令，完整列表和說明可參看官方文檔。 FROM指定 base 鏡像。 MAINTAINER設置鏡像的作

RUN vs CMD vs ENTRYPOINT - 每天5分鐘玩轉 Docker 容器技術（17）

docker 教程 容器 RUN、CMD 和 ENTRYPOINT 這三個 Dockerfile 指令看上去很類似很容易混淆。本節將通過實踐詳細討論它們的區別。簡單的說RUN 執行命令並創建新的鏡像層RUN 經常用於安裝軟件包。CMD 設置容器啟動後默認執行的命令及其參數但 CMD 能夠被 doc

使用公共 Registry - 每天5分鐘玩轉 Docker 容器技術（19）

docker 教程 容器 保存和分發鏡像的最直接方法就是使用 Docker Hub。Docker Hub 是 Docker 公司維護的公共 Registry。用戶可以將自己的鏡像保存到 Docker Hub 免費的 repository 中。如果不希望別人訪問自己的鏡像，也可以購買私有 repos

Docker 鏡像小結 - 每天5分鐘玩轉 Docker 容器技術（21）

列表 例如 normal one sys tro docker comm color 本節我們對 Docker 鏡像做個小結。 這一部分我們首先討論了鏡像的分層結構，然後學習了如何構建鏡像，最後實踐使用 Docker Hub 和本地 registry。 下面是鏡像的常用操作

如何運行容器？- 每天5分鐘玩轉 Docker 容器技術（22）

docker 教程 容器 上一章我們學習了如何構建 Docker 鏡像，並通過鏡像運行容器。本章將深入討論容器：學習容器的各種操作，容器各種狀態之間如何轉換，以及實現容器的底層技術。運行容器docker run 是啟動容器的方法。在討論 Dockerfile 時我們已經學習到，可用三種方式指定容器

兩種進入容器的方法 - 每天5分鐘玩轉 Docker 容器技術（23）

工作 技術 啟動進程 gin attach ant while col -c 我們經常需要進到容器裏去做一些工作，比如查看日誌、調試、啟動其他進程等。有兩種方法進入容器：attach 和 exec。 docker attach 通過 docker attach 可以 a

運行容器的最佳實踐 - 每天5分鐘玩轉 Docker 容器技術（24）

oat add vertical poi can size 執行命令 後臺 運行 按用途容器大致可分為兩類：服務類容器和工具類的容器。 1. 服務類容器以 daemon 的形式運行，對外提供服務。比如 web server，數據庫等。通過 -d 以後臺方式啟動這類容器是非常

容器常用操作 - 每天5分鐘玩轉 Docker 容器技術（25）

技術 order position 自動 code lec 資源 add 服務 前面討論了如何運行容器，本節學習容器的其他常用操作。 stop/start/restart 容器 通過 docker stop 可以停止運行的容器。 容器在 docker host 中實際上是

限制容器對內存的使用 - 每天5分鐘玩轉 Docker 容器技術（27）

upload 機制 性能 http tle war pac 啟動 物理內存 一個 docker host 上會運行若幹容器，每個容器都需要 CPU、內存和 IO 資源。對於 KVM，VMware 等虛擬化技術，用戶可以控制分配多少 CPU、內存資源給每個虛擬機。對於容器，D

限制容器對CPU的使用 - 每天5分鐘玩轉 Docker 容器技術（28）

docker 教程 容器 上節學習了如何限制容器對內存的使用，本節我們來看CPU。默認設置下，所有容器可以平等地使用 host CPU 資源並且沒有限制。Docker 可以通過 -c 或 --cpu-shares 設置容器使用 CPU 的權重。如果不指定，默認值為 1024。與內存限額不同，通過