How to prevent content from a div Edit together with the css Rotate effect?

Question

Good morning to all.

I put the Rotate effect on a div, but the internal content also spun along. How do I make him normal with standard alignment and the div continue with the Rotate?

example:

.minha-div{-webkit-transform:scale(1.5) rotate(5deg);}

With that done the div rotates 5 degrees. But the content rotates together.

Somebody help me?

Answer 1

Just put a negative spin on the div of the content, in your case would be -5deg.

.minha-div {
    -webkit-transform:scale(1.5) rotate(5deg);
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 100px;
  }
  
 .conteudo {
    -webkit-transform: rotate(-5deg);
  }

<div class="minha-div">
<div class="conteudo">teste</div>
</div>

Like the lazyFox mentioned in the comments, there is also a way to do this using the attribute :after. I find the previous method more simplified, but it is here for curiosity:

.minha-div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
}
.minha-div:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    border: 1px solid red;
    z-index:-1;
}

.conteudo {
    position: absolute;
    left: 20px;
    top: 20px;
}

<div class="minha-div">
    <div class="conteudo">hello</div>
</div>