你還在愁女朋友的生日禮物嗎，來啦，3D旋轉圖：
運用圖檔：111.jpg，222.jpg
111.jpg：
222.jpg：
HTML代碼：
<html> <head> <meta charset="utf-8" /> <title>3Dboxtitle> <link rel="stylesheet" type="text/css" href="./css/index.css" target="_blank" rel="external nofollow" /> head> <body> <div class="box"> <ul class="minbox"> <li>li> <li>li> <li>li> <li><li> <li>li> ul> <ul class="maxbox"> <li>li> <li>li> <li>li> <li>li> <li>li> <li>li> ul> div> body>html>
CSS代碼：
*{ margin: 0; /*去掉外邊距*/ padding: 0; /*去掉内邊距*/}.box{ width: 200px; /*寬度*/ height: 200px; /*高度*/ position: absolute;/*絕對定位*/ top: 30%; /*與頂部的距離*/ left: 40%;/*與左側的距離*/ transform-style: preserve-3d; /*^_^隻有設定了此屬性才有z軸*/ transform: rotateX(-90deg);/*繞x軸旋轉*/ /*使用動畫*/ animation: move 10s 100 linear; /*動畫名稱 動畫執行的時間 次數 勻速*/}ul{ list-style: none; /*去掉點*/}/*定義動畫*/@keyframes move{ from{ transform: rotateX(-30deg) rotateY(0deg); } to{transform: rotateX(-30deg) rotateY(360deg);}}/*小盒子*/.minbox{ width: 100px; /*寬度*/ height: 100px;/*高度*/ position: absolute; /*絕對定位*/ left: 50px; top: 50px; transform-style: preserve-3d;/*設定為3d圖形*/}.minbox > li{ width: 100px; height: 100px; border: 1px solid black;/*邊框寬度 樣式 顔色*/ font-size: 50px;/*設定字型大小*/ text-align: center;/*文本水準居中*/ line-height: 100px;/*讓行高等于高度,達到垂直居中的效果*/ position: absolute; left: 0; top: 0; background-image: url(../img/111.jpg);//可以換成你喜歡的照片 background-size: 100px 100px;}.minbox > li:nth-child(1){ transform: translateZ(50px);}.minbox > li:nth-child(2){ transform: translateZ(-50px);}.minbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(50px);}.minbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-50px);}.minbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(50px);}.minbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-50px);} /*大盒子*/.maxbox{ width: 200px; /*寬度*/ height: 200px;/*高度*/ position: absolute; /*絕對定位*/ left: ; top: 0; transform-style: preserve-3d;/*設定為3d圖形*/}.maxbox > li{ width: 200px; height: 200px; border: 1px solid black;/*邊框寬度 樣式 顔色*/ font-size: 50px;/*設定字型大小*/ text-align: center;/*文本水準居中*/ line-height: 200px;/*讓行高等于高度,達到垂直居中的效果*/ position: absolute; left: 0; top: 0; background-image: url(../img/222.jpg);//可以換成你喜歡的照片 background-size: 200px 200px; opacity: 0.8;}.maxbox > li:nth-child(1){ transform: translateZ(100px);}.maxbox > li:nth-child(2){ transform: translateZ(-100px);}.maxbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(100px);}.maxbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-100px);}.maxbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(100px);}.maxbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-100px);}.box:hover ul.maxbox > li{ width: 400px; height: 400px; background-size: 400px 400px ; top: -100px; left: -100px;}.box:hover ul.maxbox > li:nth-child(1){ transform: translateZ(300px);}.box:hover ul.maxbox > li:nth-child(2){ transform: translateZ(-300px);}.box:hover ul.maxbox > li:nth-child(3){ transform: rotateY(90deg) translateZ(300px);}.box:hover ul.maxbox > li:nth-child(4){ transform: rotateY(90deg) translateZ(-300px);}.box:hover ul.maxbox > li:nth-child(5){ transform: rotateX(90deg) translateZ(300px);}.box:hover ul.maxbox > li:nth-child(6){ transform: rotateX(90deg) translateZ(-300px);}