创建一个包含旋转的列表

时间:2014-08-12 10:54:18

标签: html css

我一直在努力找出实现这一目标的最佳方法,但却无法想到任何事情,也没有在大型互联网上找到太多。

但这是我想要达到的目标;列表并在每个<li>上旋转-45deg

li {
    width: 160px;
    height: 160px;
    border: solid 1px #828080;
    display: inline-block;
    padding: 0;
    float: left;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg);
    position: relative;
    margin: 33px;
}

应该看起来像这样的东西(希望你能得到这个想法,我的糟糕的Photoshop技能) enter image description here

这里有一个简单的JSfiddle

1 个答案:

答案 0 :(得分:3)

rotate继续ul并从margin移除li

.picker {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
     transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg);
}

li {
    width: 160px;
    height: 160px;
    border: solid 1px #828080;
    display: inline-block;
    padding: 0;
    float: left;
    position: relative;
    background-color: red;
}

Fiddle