流行的3D旋轉相簿，看了就不虧！

完整**：

"wrap">
"in-front">
"in-back">
"in-left">
"in-right">
"in-top">
"in-bottom">
"out-front">
"out-back">
"out-left">
"out-right">
"out-top">
"out-bottom">

html #wrap span /*設定,外層的立方體*/ #wrap div #wrap span img #wrap div img #wrap #in-front #in-back #in-left #in-right #in-top #in-bottom #out-front #out-back #out-left #out-right #out-top #out-bottom @keyframes rotateto} #wrap:hover #out-front #wrap:hover #out-back #wrap:hover #out-left #wrap:hover #out-right #wrap:hover #out-top #wrap:hover #out-bottom

第一步

（1）html中寫入6個小正方形標籤

html中的**：

"wrap">
"in-front">
"in-back">
"in-left">
"in-right">
"in-top">
"in-bottom">

（2）轉換為塊級元素

css中的**: /*將正方形轉變為塊元素

/*將正方形轉變為塊元素*/ #wrap span

**和瀏覽器執行效果：

第二步，組成小立方體

（1）絕對定位：

將正方形設定為絕對定位，即在css中#wrap span中新增絕對定位**： position :absolute; 這個時候6個正方形疊在了一起

（2）旋轉跳躍：

在css中新增以下**可以讓疊在一起的正方形變成立方體：

/*前面*/ #in-front /*後面*/ #in-back /*左面*/ #in-left /*繞y軸旋轉90°，離z軸50px的距離*/ /*右面*/ #in-right /*上面*/ #in-top /*下面*/ #in-bottom

第三步，3d旋轉

（1）加入旋轉所需的函式：

在css新增乙個動態函式，使它能夠旋轉動起來。**如下：

@keyframes rotate
to}

因為這個6面都是在包裹器中，所以也要設定一下包裹器，在css中新增下面這段**，寬高是100px,正好包裹立方體6個面，然後距離瀏覽器上下200px，達到水平居中的效果，繫結選擇器keyframe的名稱rotate,完成動畫的時間20s,infinite設定迴圈,linear效果為勻速。

#wrap

第四步，給小立方體每個面上圖

（1）建乙個放的資料夾

在資料夾中新建乙個放的資料夾，命名為img，並加入一張命名為1.jpg

（2）加入img

每條span標籤中都加一條

發現格式太大，就變成這樣了

/*設定的大小*/ #wrap span img

這樣裡面的立方體就算做好了

第五步，製作外層立方體

(1)加入外層的立方體，

在html中包裹器wrap新增以下**，

"out-front">
"out-back">
"out-left">
"out-right">
"out-top">
"out-bottom">

同時在css中也新增：

/設定,外層的立方體/

#wrap div

(2)絕對定位：

和上面6個小正方形組成小立方體類似，將6個外層的大正方形組成大立方體，在css中的#wrap div中新增絕對定位**：position:absolute;發現絕對定位6個大正方形也疊在了一起

(3)旋轉跳躍：

也是將各個正方形移動到它該去的地方，組成外層的立方體，在css中新增**：

#out-front #out-back #out-left #out-right #out-top #out-bottom

(4)使小立方體處在大立方體中心

上圖雖然總體看似好像有了雛形，但是我們還要操作一下裡面的小立方體，要在css中的#wrap span中加入

top
: 50px;
left
: 50px;

從而使小立方體距離外層立方體50px，做完這步因為外層立方體包裹住的原因，我們不能看出裡面立方體的效果。

第六步，為外層立方體新增

（1）新增

將一張放入img資料夾中，命名為2.jpg

（2）給外層立方體放上

在html中將大立方體的標籤（div)加入img屬性，標籤中新增6條這樣的語句，但是有時候因為格式太大就會出現這種情況。

#wrap div img

第七步，做滑鼠移入後的動畫

（1）滑鼠移上去，外層發生變化

在css中新增以下**：

#wrap:hover #out-front #wrap:hover #out-back #wrap:hover #out-left #wrap:hover #out-right #wrap:hover #out-top #wrap:hover #out-bottom

雖然可以發生變化，但是外層開啟的動畫很生硬，非常突兀。

（2）加入開啟時間

設定滑鼠移入後的動畫變化的時間效果，時間為0.4s，在#wrap div中新增**：transition:all 0.4s ;

就會有乙個0.4的開啟時間了，就會好看很多。

（3）修改包裹器

我們發現在立方體運動過程還會往上移，這不是我們想看到的，下圖很明顯可以看出旋轉過程中發現往上移動了很多。原因在於我們一開始定義的包裹器大小只有100px，而後來的外層立方體是200px，所以需要修改包裹器的大小，使它能完美包裹外層立方體。

（4）美化

①可以將背景變為黑色，還可以設定透明度，效果會更好，在css加入：

html

分別在#wrap span和#wrap div中加入透明度**：opacity: 0.8;

流行的3D旋轉相簿，看了就不虧！

3D旋轉帶倒影相簿

HTML CSS實現3D旋轉相簿

用CSS動畫和3D旋轉實現的相簿

流行的3D旋轉相簿，看了就不虧！

3D旋轉帶倒影相簿

HTML CSS實現3D旋轉相簿

用CSS動畫和3D旋轉實現的相簿

相關推薦