How to prevent content from a div rotating along with the rotate effect of css?

Question

How to prevent content from a div rotating along with the rotate effect of css?

Navigation

#1 by (5 votes)

0

Good morning, everyone.

I put the rotate effect on a div, but the inner content also spun together. How do I get it normal with standard alignment and the div continue with the rotate?

example:

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

With this the div turns 5 degrees. But the content spins together.

Does anyone help me?

html5 css front-end

asked by anonymous 19.03.2018 / 16:53

1 answer

Is there any specific Javascript event to detect when a datalist option is selected? How to change button color using RGB or Hexadecimal code?

score 5 · Accepted Answer

Just put a negative spin on div of the content, in your case it 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>

As the lazyFox mentioned in the comments, there is also a way to do this using the :after attribute. I find the previous method more simplified, but stay 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>