僅使用CSS創建箱體翻蓋打開效果

我試圖使用過渡創建此效果。它應該看起來像你打開一個盒子。僅使用CSS創建箱體翻蓋打開效果

有2個問題：

其中框關閉是一樣的，它打開的順序。無論如何，要按照開啓的相反順序關閉盒子，以便盒子以與關閉時相同的狀態返回？
綠色和黃色襟翼的末端在過渡期間因爲紅色和藍色襟翼而隱藏，因此它看起來不是3D。有沒有一種方法可以用3D方式顯示所有襟翼？

我寧願如果解決方案是純CSS的，不需要JavaScript。

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 0.3s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.6s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease 0.9s; 
 
} 
 
#box:hover #flap1{ 
 
    transform: rotateY(-170deg); 
 
} 
 
#box:hover #flap2{ 
 
    transform: rotateY(170deg); 
 
} 
 
#box:hover #flap3{ 
 
    transform: rotateX(170deg); 
 
} 
 
#box:hover #flap4{ 
 
    transform: rotateX(-170deg); 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div id="box"> 
 
     <div id="flap1"></div> 
 
     <div id="flap2"></div> 
 
     <div id="flap3"></div> 
 
     <div id="flap4"></div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-05-26 Dhruv Chadha

1.我認爲你不能。只需添加其他課程或其他內容。 2。你可以使用css3 ['perspective']（http://www.w3schools.com/cssref/css3_pr_perspective.asp） –

問題1：

如果你給了:hover選擇和默認的選擇中相反的順序以正向順序的延遲，這將實現完全相反動畫。

問題2：

的修復和解釋如下：

在過渡期的一部分，綠色和黃色的盒子不喜歡看他們有3D效果因爲有幾個元素的z-index位於上方。這可以防止拉伸區域（由於透視旋轉）出現，因此它看起來只有2D（而實際上不是）。爲了克服這個問題，我們需要指導瀏覽器保存變換的3D方面。這是通過使用transform-style: preserve-3d完成的。
當我們完成上述操作時，襟翼將全部打開，並帶有3D效果，但靠近動畫開始處及其結束處，轉換實際開始時將看到藍色襟翼上的閃爍，並且藍色襟翼結束。看起來這是因爲當使用3D變換時z-index失去效果，並且在失去z-index效果和開始preserve-3D效果之間存在少量時間，在該效果期間藍色暫時落後。爲了解決這個問題，增加了相當於z-index: 1（即translateZ(1px)）的3D等效物。 Z軸上的平移將元素靠近1px，並將其保持在黃色和綠色襟翼之上。
最後，儘管如上所述，懸停動畫結束時會出現一個小故障，綠色皮瓣通過藍色皮瓣顯示。爲了克服這個問題，我改變了延遲時間。

（相反的是我原先提到的，translateZ(0px)是不需要的，可以刪除。）

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
    transform-style: preserve-3d; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 0 0; 
 
    transition: transform 1s 1.5s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 1s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap1 { 
 
    transform: rotateY(-170deg) translateZ(1px); 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap2 { 
 
    transform: rotateY(170deg) translateZ(1px); 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#box:hover #flap3 { 
 
    transform: rotateX(170deg); 
 
    transition: transform 1s ease 1s; 
 
} 
 
#box:hover #flap4 { 
 
    transform: rotateX(-170deg); 
 
    transition: transform 1s ease 1.5s; 
 
}

<div id="box"> 
 
    <div id="flap1"></div> 
 
    <div id="flap2"></div> 
 
    <div id="flap3"></div> 
 
    <div id="flap4"></div> 
 
</div>

來源

2016-05-26 09:17:24 Harry

第一個問題的解決方案非常好，雖然第二個解決方案運行良好，但我不明白z-索引正在解決問題....你看，如果紅色和藍色襟翼的z-index是1px，這比綠色和黃色框更多，不應該仍然存在第二個問題，因爲綠色和黃色框仍然低於紅色和藍色盒？ @Harry –

@DruveChadha：'translateZ（）'幾乎和'z-index'在3D場景中的一樣。您對綠色和黃色仍然低於藍色和紅色仍然是正確的，但添加3D轉換會導致圖層創建（複雜渲染過程的一部分），從而影響行爲。評論中很難解釋。我會盡力在答案中詳細說明。給我一些時間。 – Harry

@DhruvChadha：我添加了一些額外的解釋（並從原始答案中糾正了一個錯誤：D）。看看它是否有幫助:) – Harry

僅使用CSS創建箱體翻蓋打開效果

回答

相關問題