Рисование кубоид с CSS

Question

Я пытаюсь нарисовать кубоид с помощью CSS (как этого http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png, но только 3 видимых граней необходимы)

Много материала проверили, но ничего не нашел именно: S

Может кто-нибудь Помогите?

РЕШЕНИЕ. Код:

<style> 
#cubetop { 
    width: 200px; 
    height: 40px; 
    background: green; 
    -webkit-transform:  
     translateX(20px) 
     skew(-45deg, 0deg); 
} 

#cubeface { 
    width: 200px; 
    height: 60px; 
    background: yellow; 
    display:block; 
    float:left; 
} 

#cuberight { 
    width: 40px; 
    height: 60px; 
    background: navy; 
    display:block; 
    float:left; 
    -webkit-transform:  
     translateY(-20px) 
     skew(0deg, -45deg); 
} 
</style> 
<div id="cubetop"></div> 
<div id="cubeface"></div> 
<div id="cuberight"></div>​ 

Answer 1

Если у вас все в порядке css3, вы можете использовать преобразования. Имейте 3 отдельных элемента div и применяйте преобразования для каждого.

Что-то вроде этого в Mozilla

-moz-transform: rotate(15deg) 
        translateX(230px) 
        scale(1.5); 

И как это в IE

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')"; 

В качестве альтернативы попробуйте:

http://www.useragentman.com/tests/cssSandpaper/cube3.html