🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
效果演示： 文末獲取原始碼
代碼目錄：
主要代碼實作：
部分CSS樣式：
.cube {
width: 100%;
height: 100%;
}
@font-face {
font-family: "RubikExtended";
src: url("../media/RubikExtended.ttf") format( "truetype"), url("../media/RubikExtended.otf") format( "otf");
font-weight: normal;
font-style: normal;
}
/*
This next bit is just for labeling a Cube's face.
*/
.faceLabel {
display: none;
position: absolute;
font-size: 60px;
text-align: center;
font-family: "RubikExtended";
text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3);
color: #FFF;
}
.cube .cubelet {
width: 1em;
height: 1em;
position: absolute;
box-sizing: border-box;
}
Direction-facing planes of limited size
that act as containers for content.
*/
.cube
/*.cubelet >*/
.face {
position: absolute;
width: 1em;
height: 1em;
background-color: #000;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
padding: 0.05em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/*
Extroverted faces have content such as a colored sticker, text, etc.
They are constantly visible. Meanwhile introverted faces are not
visible when the cube is an untwisted state. Some introverted walls
are momentarily visible as the cube twists.
*/
.cube
/*.cubelet >*/
.face.faceIntroverted {
background-color: #000;
}HTML代碼 :
上面的js檔案需要引入
原始碼獲取
大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取~！
打卡 文章 更新 44 / 100天
精彩推薦更新中：
HTML5大作業實戰案例《100套》
Java畢設專案精品實戰案例《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298971.html
標籤：其他
上一篇：HTML+CSS+JS實作 ??酷炫的canvas全屏背景影片特效??
下一篇：Git Push 報錯Support for password authentication was removed on August 13,2021