溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用純CSS如何實現3D旋轉效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
主要使用CSS中的 preserve-3d 、perspective 屬性實現3D效果
效果
HTML代碼
<body> <div class="box"> <div class="face front"> <h3>前面</h3> </div> <div class="face back"> <h3>背面</h3> </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 h3{
font-size: 4em;
text-transform: uppercase;
transform: perspective(500px) translateZ(50px);
}看完了這篇文章，相信你對“使用純CSS如何實現3D旋轉效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
