帶你玩轉css3的3D！-H5教程-PHP中文網

首頁

web前端

H5教程

帶你玩轉css3的3D！

巴扎黑

May 01, 2017 am 09:25 AM

3d css3 玩轉

　　話不多說，先上demo

　　酷炫css3走馬燈/正方體動畫： https://bupt-hjm.github.io/css3-3d/

# 　　github原始碼位址：https://github.com/BUPT-HJM/css3-3d

# 　　酷炫css3翻頁動畫： https://bupt-hjm.github.io/css3-flip-book/

　　github原始碼位址：https://github.com/BUPT-HJM/css3-flip-book

　　以上均純css3實現，沒有使用任何js程式碼，希望能得到大家的star啦~

　css3的3d起步

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

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

　　沿著X軸旋轉

# 帶你玩轉css3的3D！

# 　　沿著Y軸旋轉

# 帶你玩轉css3的3D！

# 　　沿著Z軸旋轉

# 帶你玩轉css3的3D！

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

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

　　perspective

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

帶你玩轉css3的3D！

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

　　perspective-origin

由上面我們了解了perspective，而加上了這個origin是什麼，我們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，我們的視點的不同位置就決定了我們看到的不同景象，預設是中心，為perspectice-origin: 50% 50%,第一個數值是3D 元素所基於的X 軸，第二個定義在y 軸上的位置

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

帶你玩轉css3的3D！

# 　　transform-style

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

　手把帶你玩css3-3d

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

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

# 帶你玩轉css3的3D！

# 　　如果圖片載入不出來，就直接訪問https://bupt-hjm.github.io/css3-3d/，覺得可以的話記得給star咯hh

　　第一步：html結構

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

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

登入後複製

　　第二步：加上必要的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還沒開始

帶你玩轉css3的3D！

# 　　第四步：3D變換來襲

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

　　如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式rotateY，就变成如下

帶你玩轉css3的3D！

　　如何把他们从中心拉开呢？

　　这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下translateZ的值,而当translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

　　但是拉开的距离如何衡量？

帶你玩轉css3的3D！

　　是不是一目了然了~

　　下面我们再修改下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, 如下

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

登入後複製

　　在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

　　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！

　　你是不是也实现了酷炫的css-3d效果呢？

以上是帶你玩轉css3的3D！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1662

CakePHP 教程

1418

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

為何在自動駕駛方面Gaussian Splatting如此受歡迎，開始放棄NeRF？ Jan 17, 2024 pm 02:57 PM

寫在前面&筆者的個人理解三維Gaussiansplatting（3DGS）是近年來在顯式輻射場和電腦圖形學領域出現的一種變革性技術。這種創新方法的特點是使用了數百萬個3D高斯，這與神經輻射場（NeRF）方法有很大的不同，後者主要使用隱式的基於座標的模型將空間座標映射到像素值。 3DGS憑藉其明確的場景表示和可微分的渲染演算法，不僅保證了即時渲染能力，而且引入了前所未有的控制和場景編輯水平。這將3DGS定位為下一代3D重建和表示的潛在遊戲規則改變者。為此我們首次系統性地概述了3DGS領域的最新發展與關

了解 Microsoft Teams 中的 3D Fluent 表情符號 Apr 24, 2023 pm 10:28 PM

您一定記得，尤其是如果您是Teams用戶，Microsoft在其以工作為重點的視訊會議應用程式中添加了一批新的3DFluent表情符號。在微軟去年宣佈為Teams和Windows提供3D表情符號之後，該過程實際上已經為該平台更新了1800多個現有表情符號。這個宏偉的想法和為Teams推出的3DFluent表情符號更新首先是透過官方部落格文章進行宣傳的。最新的Teams更新為應用程式帶來了FluentEmojis微軟表示，更新後的1800表情符號將為我們每天

選擇相機還是光達？實現穩健的三維目標檢測的最新綜述 Jan 26, 2024 am 11:18 AM

0.寫在前面&&個人理解自動駕駛系統依賴先進的感知、決策和控制技術，透過使用各種感測器（如相機、光達、雷達等）來感知周圍環境，並利用演算法和模型進行即時分析和決策。這使得車輛能夠識別道路標誌、檢測和追蹤其他車輛、預測行人行為等，從而安全地操作和適應複雜的交通環境。這項技術目前引起了廣泛的關注，並認為是未來交通領域的重要發展領域之一。但是，讓自動駕駛變得困難的是弄清楚如何讓汽車了解周圍發生的事情。這需要自動駕駛系統中的三維物體偵測演算法可以準確地感知和描述周圍環境中的物體，包括它們的位置、

CS玩家的首選：建議的電腦配置 Jan 02, 2024 pm 04:26 PM

1.處理器在選擇電腦配置時，處理器是至關重要的組件之一。對於玩CS這樣的遊戲來說，處理器的效能直接影響遊戲的流暢度和反應速度。建議選擇IntelCorei5或i7系列的處理器，因為它們具有強大的多核心處理能力和高頻率，可以輕鬆應對CS的高要求。 2.顯示卡顯示卡是遊戲表現的重要因素之一。對於射擊遊戲如CS而言，顯示卡的表現直接影響遊戲畫面的清晰度和流暢度。建議選擇NVIDIAGeForceGTX系列或AMDRadeonRX系列的顯示卡，它們具備出色的圖形處理能力和高幀率輸出，能夠提供更好的遊戲體驗3.內存電

單卡30秒跑出虛擬3D老婆！ Text to 3D產生看清毛孔細節的高精度數字人，無縫銜接Maya、Unity等製作工具 May 23, 2023 pm 02:34 PM

ChatGPT為AI產業注入一劑雞血，一切曾經的不敢想，都成為現今的基操。正持續進擊的Text-to-3D，就被視為繼Diffusion（影像）和GPT（文字）後，AIGC領域的下一個前緣熱點，得到了前所未有的關注。這不，一款名為ChatAvatar的產品低調公測，火速收攬超70萬瀏覽與關注，並登上抱抱臉週熱門（Spacesoftheweek）。 △ChatAvatar也將支援從AI生成的單視角/多視角原畫生成3D風格化角色的Imageto3D技術，受到了廣泛關注現行beta版本生成的3D模型，

CLIP-BEVFormer：明確監督BEVFormer結構，提升長尾偵測性能 Mar 26, 2024 pm 12:41 PM

寫在前面&筆者的個人理解目前，在整個自動駕駛系統當中，感知模組扮演了其中至關重要的角色，行駛在道路上的自動駕駛車輛只有通過感知模組獲得到準確的感知結果後，才能讓自動駕駛系統中的下游規控模組做出及時、正確的判斷和行為決策。目前，具備自動駕駛功能的汽車中通常會配備包括環視相機感測器、光達感測器以及毫米波雷達感測器在內的多種數據資訊感測器來收集不同模態的信息，用於實現準確的感知任務。基於純視覺的BEV感知演算法因其較低的硬體成本和易於部署的特點，以及其輸出結果能便捷地應用於各種下游任務，因此受到工業

$牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24)$ 牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24) Apr 23, 2024 pm 01:20 PM

寫在前面項目連結：https://nianticlabs.github.io/mickey/給定兩張圖片，可以透過建立圖片之間的對應關係來估計它們之間的相機姿態。通常，這些對應關係是二維到二維的，而我們估計的姿態在尺度上是不確定的。一些應用，例如隨時隨地實現即時增強現實，需要尺度度量的姿態估計，因此它們依賴外部的深度估計器來恢復尺度。本文提出了MicKey，這是一個關鍵點匹配流程，能夠夠預測三維相機空間中的度量對應關係。透過學習跨影像的三維座標匹配，我們能夠在沒有深度測試的情況下推斷度量相對

See all articles

帶你玩轉css3的3D！

css3的3d起步

perspective

perspective-origin

# transform-style

手把帶你玩css3-3d

第一步：html結構

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

第三步：加入必要的樣式

# 第四步：3D變換來襲

第五步：animation让3D动起来

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

　css3的3d起步

　　perspective

　　perspective-origin

# 　　transform-style

　手把帶你玩css3-3d

　　第一步：html結構

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

　　第三步：加入必要的樣式

# 　　第四步：3D變換來襲

　　第五步：animation让3D动起来