Web前端：HTML+CSS+JS實作美女照片3D立方體旋轉

臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大？網頁要求的總數量太多？HTML網頁作業無從下手？沒有合適的模板？等等一系列問題，你想要解決的問題，在這里常見網頁設計作業題材有 個人、 美食、 公司、體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 游戲、 節日、 戒煙、 電影、 攝影 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求，原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼，這是一個不錯的電競博客網頁制作，畫面精明，非常適合初學者學習使用，

效果演示：

代碼目錄：

主要代碼實作：

CSS樣式：

body {
    /*background: url(../img/preview.png) ;*/
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

li {
    list-style: none;
}

.box {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(13deg);
    -webkit-animation: move 5s linear infinite;
}

.minbox {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 30px;
    -webkit-transform-style: preserve-3d;
}

.minbox li {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.minbox li:nth-child(1) {
    background: url(../img/01.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.minbox li:nth-child(2) {
    background: url(../img/02.png) no-repeat 0 0;
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

.minbox li:nth-child(3) {
    background: url(../img/03.png) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.minbox li:nth-child(4) {
    background: url(../img/04.png) no-repeat 0 0;
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.minbox li:nth-child(5) {
    background: url(../img/05.png) no-repeat 0 0;
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.minbox li:nth-child(6) {
    background: url(../img/06.png) no-repeat 0 0;
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox li:nth-child(1) {
    background: url(../img/1.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(2) {
    background: url(../img/2.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(3) {
    background: url(../img/3.png) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.maxbox li:nth-child(4) {
    background: url(../img/4.png) no-repeat 0 0;
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.maxbox li:nth-child(5) {
    background: url(../img/5.png) no-repeat 0 0;
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.maxbox li:nth-child(6) {
    background: url(../img/6.png) no-repeat 0 0;
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox {
    width: 800px;
    height: 400px;
    position: absolute;
    left: 0;
    top: -20px;
    -webkit-transform-style: preserve-3d;
}

.maxbox li {
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.2;
    -webkit-transition: all 1s ease;
}

HTML代碼 :

上面的圖片檔案需要引入