? ? 當(dāng)時(shí)寫登陸注冊(cè)界面的時(shí)候，想通過(guò)3D翻轉(zhuǎn)來(lái)實(shí)現(xiàn)登錄注冊(cè)界面的切換，如今鴿了快一個(gè)月的簡(jiǎn)書(shū)了。下面講講3D翻轉(zhuǎn)的原理及其如何實(shí)現(xiàn)。
? ??3D翻轉(zhuǎn)的實(shí)現(xiàn)原理是基于CSS的3D變換和過(guò)渡效果實(shí)現(xiàn)的。在CSS中，可以使用?transform?屬性來(lái)進(jìn)行2D和3D變換，包括旋轉(zhuǎn)、縮放、平移等。而?transition?屬性可以用來(lái)設(shè)置CSS屬性的過(guò)渡效果。
?????可以設(shè)置一個(gè)元素的?transform-style?屬性為?preserve-3d，可以讓它的子元素繼承它的3D變換，從而實(shí)現(xiàn)3D效果。
? ? 然后通俗來(lái)講，我們需要?jiǎng)?chuàng)建一個(gè)容器（盒子），它作為父元素包括兩個(gè)子元素（正面和反面），將所需要的內(nèi)容分別添加在正面和反面。而在瀏覽器中，默認(rèn)展示的是一個(gè)面，再實(shí)現(xiàn):hover類，使光標(biāo)放在盒子上時(shí)，便進(jìn)行180°的翻轉(zhuǎn)，轉(zhuǎn)到另一個(gè)面。
? ? 實(shí)現(xiàn)步驟大概是這樣的：
? ? 1.在HTML中創(chuàng)建一個(gè)元素作為容器，這個(gè)容器包含兩個(gè)子元素，分別表示正面和反面。
? ? 2.使用CSS設(shè)置容器的寬度、高度和透視效果。
? ? 3.使用CSS設(shè)置正反面元素的寬度、高度、位置和背景色等樣式。
? ? 4.使用CSS設(shè)置翻轉(zhuǎn)動(dòng)畫效果（通過(guò)設(shè)置旋轉(zhuǎn)角度、過(guò)渡時(shí)間和過(guò)渡函數(shù)等屬性）。
? ? 思路其實(shí)非常清晰，但第一次實(shí)現(xiàn)可能比較復(fù)雜。
? ? 那么下面是一個(gè)3D翻轉(zhuǎn)實(shí)現(xiàn)的示例：
? ? <HTML>
? ?
<CSS>
? ? 希望此文能對(duì)你的學(xué)習(xí)有幫助，有疑問(wèn)可以私信。
