Как при помощи CSS повернуть блок позади другого блока?

Question

Товарищи, как сделать такой эффект поворота при помощи css? Буду признателен за любую помощь

body {
  background: antiquewhite;
}

.card02 {
  width: 300px;
  text-align: center;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding-bottom: 43px;
}

<div class="our_services_cards">
  <div class="card02">
    <div class="card02_logo"></div>
    <h5 class="card_info">15 days returns</h5>
    <p class="card_text">Order in a handy way using the freshness of the groceries.</p>
  </div>
</div>

Answer 1

body { background: antiquewhite; }
* { box-sizing: border-box; }

section {
  margin: 2em auto;
  width: 200px;
  position: relative;
  z-index: 0;
  border-radius: 1em;
  padding: 2em 1em;
  text-align: center;
}

section::before, section::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

section::before {
  inset: 0;
  background: white;
  z-index: -1;
}

section::after {
  inset: 0 -1em -1em 1em;
  z-index: -2;
  transform: rotate(-4deg);
  background: orange;
}

<section>
  <img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG" width="64" height="64">
  <h5>Lorem ipsum</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>

БЛОГ НА HUSL

Как при помощи CSS повернуть блок позади другого блока?

Ответы (1 шт):