Question

我有一个设计，其中我必须转换关于postion绝对div的特定文本，这里是fiddle

现在没有transform: rotate(270deg)属性，它们完全位于彼此顶部，这就是我真正想要的

现在，当我申请transform: rotate(270deg)时，它完全离开原来的区域，就像这样来到中心

我的问题是如何删除由于transform属性而产生的空白区域，以便对其进行转换，但确切地说它在没有转换的情况下自然定位！

这是我的代码

HTML

<div class="index-section2">

        <div class="display-inline-block">
            <img src="http://nextcrawl.co/website/phase-img.jpg" class="img-responsive" />
            <div class="pos-abs">
                <h3>Phase 1</h3>
                <h4>Sold out</h4>
                <h5>mcity condos</h5>
            </div>

        </div>

    </div>
    <div class="index-section2">

        <div class="display-inline-block">
            <img src="http://nextcrawl.co/website/phase-img.jpg" class="img-responsive" />
            <div class="pos-abs">
                <h3>Phase 2</h3>
                <h4>Available</h4>
            </div>

            <div class="pos-abs2">
                <h5>mcity condos</h5>
            </div>

        </div>

    </div>
    <div class="index-section2">

        <div class="display-inline-block">
            <img src="http://nextcrawl.co/website/phase-img.jpg" class="img-responsive" />
            <div class="pos-abs">
                <h3>Phase 3</h3>
                <h4>To Be Announced</h4>
            </div>

            <div class="pos-abs2">
                <h5>mcity condos</h5>
            </div>

        </div>

    </div>

CSS

.index-section2{
    position: relative;
    float: left;
    height: 100%;
    width: 33.3%;
}
.index-section2 .display-inline-block{
    display: inline-block;
    width: 100%;
}
.index-section2 .opacity{
    opacity: 0.8;
}
.index-section2 .display-inline-block .pos-abs {
    position: absolute;
    top: 41px;
    left: 13%;
    height: 93%;
    width: 87%;
}
.index-section2 .display-inline-block .pos-abs h5{
    /* transform: rotate(270deg); */
}
.index-section2 .display-inline-block img{
    width: 100%;
}

.index-section2 .display-inline-block .pos-abs h3 , .index-section2 .display-inline-block .pos-abs h4 , .index-section2 .display-inline-block .pos-abs h5 , .index-section2 .display-inline-block .pos-abs2 h5{
    color: white;
    margin: 0;
    text-transform: uppercase;
}
.index-section2 .display-inline-block .pos-abs h3 {
    font-family: "antonio-regular";
    font-size: 40px;
}
.index-section2 .display-inline-block .pos-abs h4 {
    font-family: "antonio-light";
    font-size: 30px;
}
.index-section2 .display-inline-block .pos-abs h5 {
    font-family: "antonio-light";
    font-size: 30px;
    letter-spacing: 6px;
    position: absolute;
    width: 100%;
    bottom: 95px;
}

Answer 1

这样的事情怎么样？

＆＃13;

div {
  border: 1px solid red;
  width: 300px;
  height: 30px;
}
#rot {
  position: absolute;
  transform-origin: top left;
  transform: rotate(-90deg);
  top: 340px;
}

＆＃13;

<div id="rot">aaa</div>
<div>bbb</div>

＆＃13;

position: absolute和float: left都应该有效，具体取决于您希望如何定位内容。

Answer 2

您可能希望transform: rotate(270deg) translate(0,100%)元素上有transform-origin: bottom left和bottom: 0以及h5。然后在bottom: 55px元素上执行.pos-abs之类的操作。

变换旋转属性占用原始空间

2 个答案: