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