html - CSS3: 影付きの立方体

Question

この場合、画像は言葉よりも雄弁だと思います。

私はこの効果を得たい：

しかし、CSS3 でできる最善のことは次のとおりです。

そして、これのコードは絶対にひどいです:

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

純粋な CSS3 でこのような効果を作成する方法はありますか? 3Dでもかまいませんが、等角図が望ましいでしょう。

ボックスの側面にコンテンツを配置する必要はなく、前面だけに配置する必要があるため、1 つの<div>要素だけを使用しています。

これが私がこれまでに持っているものです: http://jsfiddle.net/X7xSf/3/

どんな助けでも大歓迎です！

Answer 1

CSSで生成されたいくつかの要素でいくつかの傾斜変換を使用します...これを見てください：

http://jsfiddle.net/X7xSf/12/

これを本番環境で使用したい場合は、変換前と変換後をサポートするブラウザー (IE8 のみ) を特定し、2008 年のポール アイリッシュの方法 (http://paulirish.com/2008/conditional-stylesheets -vs-css-hacks-answer-neither/) IE8 でこれをオフにします。

Answer 2

ええと...私の考えは、ボーダーハックとマスキングを使用して、それを機能させることでした...少なくともIE 8？ しかし、境界線を後方にアニメーション化する方法がわかりません。修正しました。

ここで私のアイデアを見ることができます: http://jsfiddle.net/k2AdU/1

コードのコンセプトは、:before と :after を使用してコーナーのマスクを作成することです。

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}