CODEWITHSUNDEEP
css
Roli Agrawal
Roli Agrawal

Reputation: 2466

Space while rotation Div In css

I want one div in my page whose position will be fixed rotation is 30 degree but when I am doing this its shows like this

enter image description here

I Don't want that empty space in the top while rotation. I want Top same as bottom currently in top its showing some space when i rotate my div.

CSS is

#beta{
    position:fixed;
    bottom:0;
    padding:-30px;
    z-index: 1;
    width: 15em;
    height:3em;
    background: #65a9d7;
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);  
}

Upvotes: 0

Views: 1730

Answers (2)

Brandon Gano
Brandon Gano

Reputation: 6710

Take a look at the transform-origin CSS property if you want to set the point at which the object rotates around. In your specific example, the reason there is so much space above is because you've set bottom: 0, which will force a fixed element to snap to the bottom of its parent.

I'm not sure the exact layout you're looking for, but here is something with less white space at the top:

#beta {
  position: fixed;
  z-index: 1;
  width: 15em;
  height: 3em;
  background: #65a9d7;
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  margin-top: 4em;
}
<div id="beta">
  Beta Version
</div>

Edit: The following snippet is a follow-up to a comment from the original poster.

.container {
  border: 5px solid #000;
  height: 5em;
  overflow: hidden;
  position: relative;
  width: 15em;
}
.beta {
  background: #65a9d7;
  height: 3em;
  line-height: 3em;
  margin-top: -1.5em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 15em;
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
}
<div class="container">
  <div class="beta">
    Beta Version
  </div>
</div>

Upvotes: 1

raju
raju

Reputation: 392

You can add transform-orign, which will act as rotating axis. And if you want this to be at top then add top and remove bottom value and while rotating, the blocks shifts so give left value to the half of its height of appropriate value.

#beta{
    position:fixed;
    top:0;
    z-index: 1;
    width: 15em;
    height:3em;
    left: 1.5em;
    background: #65a9d7;
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);  
   transform-origin: left top;
}

And one more thing, padding doesn't work with negative value. :)

Have a nice code day.

Upvotes: 2

Related Questions