转换div board top

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

这样的事情可以做到

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;