轉換div板頂部

Question

如何將CSS-div轉換爲圖像http://screenshots.fr.sftcdn.net/fr/scrn/321000/321755/yu-gi-oh-online-3-12.jpg板？

這種視圖叫什麼？我玩過skew，但確實找到了它。

.board { 
    width: 325px; 
    background: #ddd; 
    border: 1px solid #ccc; 
    height: 300px; 
    margin-left: 300px; 
transform: skew(5deg, 40deg); 
} 

Answer 1

像這樣的事情會做

#div { 
 
    position: relative; 
 
    height: 250px; 
 
    width: 250px; 
 
    margin: 50px; 
 
    margin-top: 0; 
 
    padding: 10px; 
 
    padding-top: 0; 
 
    perspective: 300px; 
 
} 
 

 
#box 
 
{ 
 
    display: inline-block; 
 
    transform: rotateX(45deg); 
 
} 
 

 
#row { 
 
    background-color: blue; 
 
    width:50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
}

<div id="div"> 
 
    <div id="box"> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <br /> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <br /> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <br /> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    <div id="row"></div> 
 
    </div> 
 
</div>