How to put text as an overlay on an image vertically aligned at the top left in a div

Question

With the code below, why the text COMING SOON goes further to the right and does not align to the left. The text should be placed as a vertical overlay in the upper left corner of the image.

HTML:

<div class="grid">
    <div class="block">
        <div class="badge">NEW</div>
    </div>
    <div class="block">
        <div class="badge">SALE</div>
    </div>
    <div class="block">
        <div class="badge">COMING SOON</div>
    </div>
</div>

CSS

.grid{display:block;width:100%;}
.block{width:255px;height:255px;border:1px solid #333;margin:12px;float:left;position:relative;}
.badge{position:absolute;transform:rotate(90deg);top:12px;left:0;}

Answer 1

Use transform-origin. It tells the browser where it should happen transform: rotate.

Find the code at: http://jsfiddle.net/yv0Lugp8/1/

More information about the source of transformation can be found HERE

EDIT: Changed URL after updating code.

Answer 2

transform:rotate(90deg) .block, . top .badge 230px.

CSS

.grid{display:block;width:100%;}
.block{transform:rotate(90deg);width:255px;height:255px;border:1px solid #333;margin:12px;float:left;position:relative;}
.badge{position:absolute;top:230px;left:0;}

Answer 3

tranform-orgin ( ).

DEMO

CSS

.badge {
    transform:rotate(90deg);
    transform-origin: left top 0;
    float: left;
    position:absolute;
    left: 14px;
}

.badge 14px, .block 12px margin 1px border. float: left .badge.

Answer 4

transform-origin . , ".badge", ".block" 90 .

"", :

.badge {
    position:absolute;
    transform:rotate(90deg);
    transform-origin:0px 15px;
    top:12px;
    left:0;
}

, .