如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊

本篇文章給大家分享的是有關(guān)如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)專業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

文中的img標(biāo)簽![](images/jacky/xin.png) 全部變成了macdown格式

一. 什么是2D和3D

1.什么是2D和3D

2D就是一個平面, 只有寬度和高度, 沒有厚度
3D就是一個立體, 有寬度和高度, 還有厚度
默認(rèn)情況下所有的元素都是呈2D展現(xiàn)的

2.如何讓某個元素呈3D展現(xiàn)

和透視一樣, 想看到某個元素的3d效果, 只需要給他的父元素添加一個transform-style屬性, 然后設(shè)置為preserve-3d即可

3.transform-style的取值:

flat:默認(rèn)取值,二維的;
preserve-3d:3D效果;

<html lang="en"> <head>     <meta charset="UTF-8">     <title>106-3D轉(zhuǎn)換模塊</title>     <style>
         *{             margin: 0;             padding: 0;         }         
         .father{             width: 200px;             height: 200px;             
         background-color: red;             border: 1px solid #000;             margin: 100px auto;
                      perspective: 500px;             transform-style: preserve-3d; 
                      transform: rotateY(0deg); 
                               }         .son{             width: 100px;             height: 100px;             background-color: blue;             border: 1px solid #000;             margin: 0 auto;             margin-top: 50px;             transform: rotateY(45deg);         }     </style> </head> <body> <p class="father">     <p class="son"></p> </p> </body> </html>

二. 正方體(有瑕疵,頁面文字顯示有問題)

<html lang="en"> <head>     <meta charset="UTF-8">     <title>107-3D轉(zhuǎn)換模塊-正方體</title>     <style>     *{         margin: 0;         padding: 0;     }     ul{         width: 200px;         height: 200px;         border: 1px solid #000;         box-sizing: border-box;         margin: 100px auto;         position: relative;         transform: rotateY(0deg) rotateX(0deg);         transform-style: preserve-3d;     }     ul li{         list-style: none;         width: 200px;         height: 200px;         font-size: 60px;         text-align: center;         line-height: 200px;         position: absolute;         left: 0;         top: 0;     }     ul li:nth-child(1){         background-color: red;         transform: translateX(-100px) rotateY(90deg);     }     ul li:nth-child(2){         background-color: green;         transform: translateX(100px) rotateY(90deg);     }     ul li:nth-child(3){         background-color: blue;         transform: translateY(-100px) rotateX(90deg);     }     ul li:nth-child(4){         background-color: yellow;         transform: translateY(100px) rotateX(90deg);     }     ul li:nth-child(5){         background-color: purple;         transform: translateZ(-100px);     }     ul li:nth-child(6){         background-color: pink;         transform: translateZ(100px);     } </style> </head> <body> <ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>     <li>6</li> </ul> </body> </html>

如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊

正方體(有瑕疵,僅供了解)

三. 正方體(終極方案)

旋轉(zhuǎn)90度后,坐標(biāo)系也跟著旋轉(zhuǎn)了90度,故應(yīng)該沿著z軸移動;

立體效果攻略:先旋轉(zhuǎn)一定的度數(shù),再沿z軸平移

<html lang="en"> <head>     <meta charset="UTF-8">     <title>108-3D轉(zhuǎn)換模塊-正方體終極</title>     <style>         *{             margin: 0;             padding: 0;         }         ul{             width: 200px;             height: 200px;             border: 1px solid #000;             box-sizing: border-box;             margin: 100px auto;             position: relative;             transform: rotateY(0deg) rotateX(0deg);             transform-style: preserve-3d;         }         ul li{             list-style: none;             width: 200px;             height: 200px;             font-size: 60px;             text-align: center;             line-height: 200px;             position: absolute;             left: 0;             top: 0;         }        
ul li:nth-child(1){             background-color: red;             transform: rotateX(90deg) translateZ(100px);                    }         
ul li:nth-child(2){             background-color: green;             transform: rotateX(180deg) translateZ(100px);         }         ul li:nth-child(3){             background-color: blue;             transform: rotateX(270deg) translateZ(100px);         }         ul li:nth-child(4){             background-color: yellow;             transform: rotateX(360deg) translateZ(100px);         }         ul li:nth-child(5){             background-color: purple;             transform: translateX(-100px) rotateY(90deg);         }         ul li:nth-child(6){             background-color: pink;             transform: translateX(100px) rotateY(90deg);         }     </style> </head> <body> <ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>     <li>6</li> </ul> </body> </html>



如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊

以上就是如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：如何實現(xiàn)HTML與CSS中的3D轉(zhuǎn)換模塊
本文地址：http://muchs.cn/article20/gjsdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站營銷、微信公眾號、小程序開發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作