CSS3帶陰影的3D盒子

Question

我正在製作通知系統。我想讓這個通知像一個盒子一樣顯示出來，有點像iOS中的一些通知，屏幕頂端像立方體一樣旋轉。

現在，立方體的正面和背面應該是透明的/背景顏色相同。當它轉動時，陰影應該落在不平行於觀看者前方的兩側，就好像箱子上閃着一盞燈。這可以做到嗎？

爲了更清楚：由於包裝盒的正面&背面都一樣的背景色，轉彎時的盒子似乎不會像一個盒子打開而是旋轉進入紙片地點。所以我想要的是立方體的表面會根據它們的角度而不是觀看者獲得一個陰影。

例如，一旦正面（由於它與背景顏色顏色相同，您無法真正看到）旋轉1度，它應該會變暗一點。另一個學位，多一點。所以只有在與用戶直接平行時才顯示臉部的真實顏色。這將創造出一個盒子的錯覺，而不是一條紙片。

我使用的是立方體本教程：http://desandro.github.io/3dtransforms/docs/cube.html

這裏是一個小提琴：http://jsfiddle.net/BqJMW/3/

的另一個問題是，目前的文本似乎有點捉襟見肘，如果你知道我的意思。通常（見下面的代碼）#cube應該解決這個問題，但它似乎仍然不成比例。

CSS

body { 
    background: #ebebeb; 
} 
.container { 
    width: 200px; 
    height: 50px; 
    position: relative; 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
} 
#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    transition: transform 1s; 
    -webkit-transform: translateZ(-25px); 
    transform: tranlateZ(-25px); 
} 
#cube figure { 
    margin:0; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
#cube .front { 
    background: transparant; 
    -webkit-transform: translateZ(25px); 
    transform: translateZ(25px); 
} 
#cube .top { 
    background: green; 
    -webkit-transform: rotateX(-90deg) translateZ(25px); 
    transform: rotateX(-90deg); 
} 
#cube .back { 
    background: transparant; 
    -webkit-transform: rotateX(180deg) translateZ(25px); 
    transform: rotate(180deg); 
} 
#cube.show-front { 
    -webkit-transform:translateZ(-25px); 
    tranform: translateZ(-25px); 
} 
#cube.show-top { 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
    -webkit-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
#cube.show-back { 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

HTML

<section class="container"> 
    <div id="cube"> 
    <figure class="front">Front</figure> 
    <figure class="top">Your notification</figure> 
    <figure class="back">Back</figure> 
    </div> 
</section> 

Answer 1

通過通知臉的初始顏色設置爲最終顏色較深的版本，我們可以的color屬性使用CSS3 transition當面部旋轉時，該面部將使其具有較亮的顏色。

我添加了一個新類較輕的「綠色」將添加/從通知臉移除/，改變了最初的color增加了一個新的過渡#cube .top。

我也糾正了一些錯別字的CSS（tranform → transform，transparant → transparent），除去從.show-front|top|back類重複-webkit-transform:translateZ(-25px);和非前綴版本，因爲它們是在同一類被覆蓋。

最後，由於通知面被翻譯爲朝向查看者25px，因此文本看起來很模糊（在Chrome上）。這似乎消失了爲我刪除-webkit-perspective: 1000px;。如果你想刪除它，我會把它留給你。

見demo或以下代碼：

CSS

body { 
    background: #ebebeb; 
} 
.container { 
    width: 200px; 
    height: 50px; 
    position: relative; 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
} 
#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    transition: transform 1s; 
    -webkit-transform: translateZ(-25px); 
    transform: translateZ(-25px); 
} 
#cube figure { 
    margin:0; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 
#cube .front { 
    background: transparent; 
    -webkit-transform: translateZ(25px); 
    transform: translateZ(25px); 
} 
#cube .top{ 
    background-color:darkgreen; 
    -webkit-transform: rotateX(-90deg) translateZ(25px); 
    transform: rotateX(-90deg); 
    -webkit-transition:background-color .5s; 
} 
#cube .top.show { 
    background-color:green; 
} 
#cube .back { 
    background: transparent; 
    -webkit-transform: rotateX(180deg) translateZ(25px); 
    transform: rotate(180deg); 
} 
#cube.show-front{ 
} 
#cube.show-top { 
    -webkit-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 
#cube.show-back { 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

的JavaScript

$('.showfront').click(function() { 
    $('.top').removeClass('show'); 
    $('#cube').removeClass().addClass('show-front'); 
}); 
$('.showtop').click(function() { 
    $('.top').addClass('show'); 
    $('#cube').removeClass().addClass('show-top'); 
}); 
$('.showback').click(function(){ 
    $('.top').removeClass('show'); 
    $('#cube').removeClass().addClass('show-back'); 
});