利用HTML5+CSS3實現(xiàn)3D轉(zhuǎn)換效果實例詳解

前言
本文介紹的是css3的3d模塊,對大家具有一定的參考價值,感興趣的朋友們下面來一起看看吧。
介紹
首先,我們來了解一下3d的坐標(biāo)系,x軸在屏幕上為水平方向,y軸為垂直方向,而z軸為垂直于屏幕的方向。
不理解的話可以參考定位屬性的z-index屬性,那個在某種意義上就是讓元素在z軸的移動。
在2d轉(zhuǎn)換模塊中我們研究了rotateX()和rotateY()方法,就是繞x軸和y軸旋轉(zhuǎn),這其實就是3d模塊的一種表現(xiàn),當(dāng)然要看到近大遠(yuǎn)小的3d效果,還需要在父元素上添加透視屬性:transform:perspective(500px);值為透視點到元素的距離,具體概念請看美術(shù)透視教學(xué)。。。。
多說無益,上代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; margin: 0 auto; } .div1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); position: relative; border:1px solid #000000; background-color: #ff0000; } .div1 div{ transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style> </head> <body> <div class="div1"> <div class="div1_1">1</div> </div> </body> </html>
效果圖:
但是,你會發(fā)現(xiàn)當(dāng)父元素轉(zhuǎn)到90度的時候元素消失了,這就說明元素是沒有厚度的。說明元素雖然具有了近大遠(yuǎn)小的透視屬性,但本質(zhì)上仍是2d的。
這是你需要添加transform-style:preserve-3d;樣式來讓元素在3d空間中轉(zhuǎn)換。這樣,元素就處在了3維的空間里,當(dāng)父元素旋轉(zhuǎn)90度,仍能看到里面的子元素。
示例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; margin: 0 auto; } .div1{ margin-top: 100px; transform:perspective(500px) rotatey(0deg); transform-style:preserve-3d; position: relative; border:1px solid #000000; } .div1 div{ background-color: #ff0000; transform:rotatey(45deg); position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; } </style> </head> <body> <div class="div1"> <div class="div1_1">1</div> </div> </body> </html>
效果圖:
上面,我們對3d轉(zhuǎn)換模塊有了一個初步的了解,下面我們一起做一個正方體,來整理一下3d模塊的知識。
一步步來做著寫太過麻煩,我就將過程寫在代碼的注釋里,小伙伴們請見諒。
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轉(zhuǎn)換模塊-正方體</title> <style> *{ margin: 0; padding: 0; /*去除默認(rèn)邊距*/ } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; /*修改基本樣式*/ transform: rotateY(45deg) rotateX(45deg); /*旋轉(zhuǎn)看看效果*/ transform-style: preserve-3d; /*將父元素設(shè)置為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); /*將第一個l向左移動100像素,然后繞y軸旋轉(zhuǎn)90度,形成左邊的面*/ } ul li:nth-child(2){ background-color: green; transform: translateX(100px) rotateY(90deg); /*將第一個2向右移動100像素,然后繞y軸旋轉(zhuǎn)90度*,形成右邊的面*/ } ul li:nth-child(3){ background-color: blue; transform: translateY(-100px) rotateX(90deg); /*將第一個3向上移動100像素,然后繞x軸旋轉(zhuǎn)90度,形成上面的面*/ } ul li:nth-child(4){ background-color: yellow; transform: translateY(100px) rotateX(90deg); /*將第一個4向下移動100像素,然后繞x軸旋轉(zhuǎn)90度*/ } ul li:nth-child(5){ background-color: purple; transform: translateZ(-100px); /*將第一個5向后移動100像素,形成后面的面*/ } ul li:nth-child(6){ background-color: pink; transform: translateZ(100px); /*將第一個l向前移動100像素,形成前面的面*/ } </style> </head> <body> <ul> <!--首先做好html布局,正方體有6個面,所以寫了6個li--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
效果圖:
這個方法比較好理解,理解了之后請看下一個。
代碼在下面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; margin: 0 auto; /*修改基本樣式*/ } .div1{ margin-top: 100px; transform: perspective(400px) rotatex(0deg) rotatey(0deg); /*擁有近大遠(yuǎn)小透視效果*/ transform-style: preserve-3d; /*設(shè)置為3d空間*/ position: relative; border:1px solid #000000; animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards; /*旋轉(zhuǎn)動畫*/ } .div1 div{ position: absolute; font-size: 80px; line-height: 200px; text-align: center; top: 0; left: 0; /*內(nèi)部樣式*/ } .div1_1{ transform: translatez(100px); background-color: red; /*向前移動100像素,作為最前面的面*/ } .div1_2{ transform: rotatex(90deg) translatez(100px); background-color:green; /*繞x軸旋轉(zhuǎn)90度,在z軸正方向移動100像素,作為上面的面*/ /*注:旋轉(zhuǎn)時坐標(biāo)系會跟著一起旋轉(zhuǎn),z軸原來是垂直屏幕向外的,繞x軸旋轉(zhuǎn)90度以后就是在屏幕上向上的方向*/ } .div1_3{ transform: rotatex(180deg) translatez(100px); background-color: blue; /*繞x軸旋轉(zhuǎn)180度,這時z軸垂直屏幕向內(nèi),在z軸正方向移動100像素,作為后面的面*/ } .div1_4{ transform: rotatex(270deg) translatez(100px); background-color: purple; /*繞x軸旋轉(zhuǎn)270度,這時z軸向下,在z軸正方向移動100像素,作為下面的面*/ } .div1_5{ transform: rotatey(90deg) translatez(100px); background-color: pink; /*繞y軸旋轉(zhuǎn)90度,這時z軸向右,在z軸正方向移動100像素,作為右面的面*/ } .div1_6{ transform: rotatey(270deg) translatez(100px); background-color: yellow; /*繞y軸旋轉(zhuǎn)90度,這時z軸向左,在z軸正方向移動100像素,作為左面的面*/ } @-webkit-keyframes xuanzhuan{ from{ transform:perspective(400px) rotatex(0deg); } to{ transform:perspective(400px) rotatex(360deg); } } .div1:hover{ transform: perspective(400px) scale(1.5); animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards; /*有hover事件是動畫暫停*/ } </style> </head> <body> <div class="div1"> <div class="div1_1">1</div> <div class="div1_2">2</div> <div class="div1_3">3</div> <div class="div1_4">4</div> <div class="div1_5">5</div> <div class="div1_6">6</div> </div> <!--html標(biāo)簽布局--> </body> </html>
效果圖:
這種寫法只要理解了,寫起來會更加的方便,而且不不用去考慮轉(zhuǎn)換的角度不對會導(dǎo)致內(nèi)容是反的,所以推薦這一種寫法。當(dāng)然這種寫法在x軸和y軸一起旋轉(zhuǎn)是也會造成內(nèi)容的反轉(zhuǎn)。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
- 這篇文章主要介紹了用css3實現(xiàn)轉(zhuǎn)換過渡和動畫效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-13
css3學(xué)習(xí)之2D轉(zhuǎn)換功能詳解
眾所周知在css3中出現(xiàn)了許多新的特性,其中2D轉(zhuǎn)換我覺的非常有意思,通過它我們能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或者拉伸,所以希望在這里和大家分享一下。有需要的朋2016-12-23CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換
這篇文章主要介紹了CSS3的RGBA中關(guān)于整數(shù)和百分比值的轉(zhuǎn)換,同時提到了關(guān)于瀏覽器的支持問題,需要的朋友可以參考下2015-08-04- 這篇文章主要介紹了css3帶你實現(xiàn)3D轉(zhuǎn)換效果,本篇的3D轉(zhuǎn)換就是基于原來的2D轉(zhuǎn)換而來,與2D轉(zhuǎn)換的功能相似,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-02-18