html - 水平 Accordion 的 transform(270deg) 宽度和左侧 css 问题

Question

我正在创建一个水平 Accordion ，但我在宽度、左侧和顶部位置上遇到了问题。我想要的是 h3 标签在转换后填充 Accordion 的整个高度所以我使用宽度为 100% 但它弄乱了 Accordion 并且 h3 标签彼此不相邻有一个间隙每个选项卡。如果有人知道将我的元素设置为彼此相邻且没有间隙并且顶部的位置是对齐的，那就太好了。你可以使用不同的元素，如果你想我只是在完成教程后使用 h3 这里是我的 jsFiddle

html:

<div class="accordian" data-type="horizontal">
<h3 id="special_offers">Special Offers</h3>
<div></div>
<h3 id="new_products">New Products</h3>
<div></div>
<h3 id="reduced_to_clear">Reduced To Clear</h3>
<div></div>
<h3 id="coming_soon">Coming Soon</h3>
<div></div>    

CSS:

accordian {
height:300px;
}
.accordian h3, .accordian div {
display:block; float:left;  position:relative
}
.accordian h3 {
padding:6px
}
.accordian h3{
-webkit-transform:rotate(-270deg);
-moz-transform:rotate(-270deg);
-ms-transform:rotate(-270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordian #special_offers {
background:#C90;
}
.accordian #new_products {
background:#C60;    
}
.accordian #reduced_to_clear {
background:#C30;    
}
.accordian #coming_soon {
background:#C00;    
}

Answer 1

最大的困惑是通过旋转一个div，宽度变成高度，高度变成宽度。除此之外，还有一个选择器可以用来指示 div 应该转向哪个 Angular (另请参阅 How do you align 270deg rotated text to top left? )。

我设置了一个高度=宽度的例子 http://jsfiddle.net/SpaKe/2/ 正如你所看到的一切都很好

现在，如果你想制作一个高 300 像素、宽 50 像素的矩形，并且你想将相邻的 div 对齐。那你就得引入 margin-right: -xxx px 。然后计算 height-width = 250px 之间的差异。所以 margin-right:-250px;应该可以解决问题。

再举个例子: http://jsfiddle.net/SpaKe/5/ 正如我们在这里看到的，它适用于大多数浏览器(目前我无法测试 IE 行为)

.accordian h3{
width:300px;
    height:50px;
    margin-right:-250px;
    float:left;
    position:relative;

    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: left bottom;
    -moz-transform: rotate(-270deg);
    -moz-transform-origin: left bottom;
    -ms-transform: rotate(-270deg);
    -ms-transform-origin: left bottom;
    -o-transform: rotate(-270deg);
    -o-transform-origin: left bottom;
    transform: rotate(-270deg);
    transform-origin: left bottom;
}

所以请记住:旋转时宽度和高度会发生变化，您可以设置 div 应该旋转的 Angular 。