CODEWITHSUNDEEP
htmlcss
uneeb meer
uneeb meer

Reputation: 692

transform rotate property taking up orginal space

i have a design in which i have to transform a specific text with respect to an postion absolute div here is my fiddle

now without the transform: rotate(270deg) property they are positioned perfectly on top on each other this is what i actually want

enter image description here

now when i apply transform: rotate(270deg) it totally leave its original area and comes in center like this enter image description here

my question is how can i remove the white space that comes due to the transform property so that it is transformed but exactly where it is positioned naturally without transform!

here is my code

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

Upvotes: 3

Views: 1611

Answers (2)

gitfudge
gitfudge

Reputation: 530

How about something like this?

div {
  border: 1px solid red;
  width: 300px;
  height: 30px;
}
#rot {
  position: absolute;
  transform-origin: top left;
  transform: rotate(-90deg);
  top: 340px;
}
<div id="rot">aaa</div>
<div>bbb</div>

Both position: absolute and float: left should work depending on how you wanna position your content.

Upvotes: 4

Anthony Mills
Anthony Mills

Reputation: 8784

You probably want transform: rotate(270deg) translate(0,100%) and transform-origin: bottom left and bottom: 0 on your h5 element. Then do something like bottom: 55px on your .pos-abs element to taste.

Upvotes: 0

Related Questions