使用純CSS實(shí)現(xiàn)3D旋轉(zhuǎn)效果的示例代碼
發(fā)布時(shí)間：2020-01-03 15:39:54 作者：CoderMiner 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用純CSS實(shí)現(xiàn)3D旋轉(zhuǎn)效果的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
主要使用CSS中的 preserve-3d 、perspective 屬性實(shí)現(xiàn)3D效果
效果
HTML代碼
<body>
<div class="box">
<div class="face front">
<h2>前面</h2>
</div>
<div class="face back">
<h2>背面</h2>
</div>
</div>
</body>
為了演示效果，將元素居中，body的css設(shè)置
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #333;
}
box 屬性設(shè)置
.box{
width: 300px;
height: 400px;
transform-style: preserve-3d;
position: relative;
}
.face{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: 2s ease-in-out;
transform: perspective(500px) rotateY(0deg);
}
前面屬性設(shè)置
.face.front{
background: #ff0;
}
背面屬性設(shè)置,在Y軸旋轉(zhuǎn) 180度,先不顯示
.face.back{
background: #3bc2ff;
color: #fff;
transform: perspective(500px) rotateY(180deg);
}
設(shè)置懸浮的動(dòng)畫(huà)效果
.box:hover .face.front{
transform: perspective(500px) rotateY(180deg);
}
.box:hover .face.back{
transform: perspective(500px) rotateY(360deg);
}
設(shè)置文字的懸浮效果
.box .face h2{
font-size: 4em;
text-transform: uppercase;
transform: perspective(500px) translateZ(50px);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)酷炫的3D旋轉(zhuǎn)透視效果
這篇文章主要介紹了CSS3實(shí)現(xiàn)酷炫的3D旋轉(zhuǎn)透視效果,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-21HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)
這篇文章主要介紹了HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)，主要運(yùn)用了perspective和tranlateY這兩個(gè)知識(shí)點(diǎn)，有需要的可以了解一下。2017-01-03- 點(diǎn)擊登陸面板會(huì)發(fā)生360度旋轉(zhuǎn)，并顯示信息，真正使用CSS3讓登陸面板3D旋轉(zhuǎn)起來(lái)，如何實(shí)現(xiàn)登陸面板3D旋轉(zhuǎn)，感興趣的小伙伴們可以參考一下2016-05-03
CSS3 3D旋轉(zhuǎn)rotate效果實(shí)例介紹
這篇文章主要為大家詳細(xì)介紹了CSS3 3D旋轉(zhuǎn)rotate效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-03- 這篇文章主要介紹了CSS3近階段篇之酷炫的3D旋轉(zhuǎn)透視 的相關(guān)資料,需要的朋友可以參考下2016-04-28
純CSS3實(shí)現(xiàn)3D旋轉(zhuǎn)書(shū)本效果
有一些前沿的電商網(wǎng)站已經(jīng)開(kāi)始使用3D模型來(lái)展示商品并支持在線定制，而其中圖書(shū)的展示是最為簡(jiǎn)單的一種，無(wú)需復(fù)雜的建模過(guò)程，使用圖片和CSS3的一些變換即可實(shí)現(xiàn)更好的展示2016-03-21css3實(shí)現(xiàn)3d旋轉(zhuǎn)動(dòng)畫(huà)特效
這篇文章主要介紹了css3實(shí)現(xiàn)3d旋轉(zhuǎn)動(dòng)畫(huà)特效，使用CSS3實(shí)現(xiàn)了3d立方體的左旋轉(zhuǎn)，右旋轉(zhuǎn)，上下旋轉(zhuǎn)等效果，十分實(shí)用，有需要的小伙伴來(lái)參考下吧2015-03-10
