Трансформация сложенных карточек на CSS

Трансформация сложенных карточек на CSS

Трансформация сложенных карточек на CSS

Как развернуть сложенные в стопку карточки при наведении мыши?

HTML разметка

HTML структура состоит из трех карточек с текстовым контентом. Вся эта конструкция помещена в гибкий контейнер. Управлять карточками мы будем через CSS переменные. Чтобы объявить переменную, пишем два дефиса (—), имя переменной (j) и указываем значение переменной (цифру).


<div class="container">
  <div class="card" style="--i:-1">
    <div class="content" style="--j:1">
      <h2>Card 01</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
      </div>
  <div class="card" style="--i:0">
    <div class="content" style="--j:2">
      <h2>Card 02</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="card" style="--i:1">
    <div class="content" style="--j:3">
      <h2>Card 03</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

Трансформация сложенных карточек на CSS

CSS код


.container{
    position: relative;/*относительное позиционирование*/
    width: 1100px;/*ширина контейнера*/
    height: 400px;/*высота контейнера*/
    display: flex;/*технология флексбокс*/
    justify-content: space-between;/*горизонтальное расположение карточек*/
    align-items: center;/*вертикальное выравнивание*/
}

Трансформация сложенных карточек на CSS

Трансформация карточек в стопку.


.container .card{
    position: absolute;/*абсолютное позиционирование*/
    top: calc(50% - 200px);/*верхняя координата*/
    left: 50%;/*левая координата*/
    transform: translate(-50%,calc(100px * var(--i))) rotate(40deg) skew(-20deg,-10deg);/*расчет*/
    width: 300px;/*ширина карточки*/
    height: 400px;/*высота карточки*/
    background: #fff;/*цвет карточки*/
    z-index: calc(-1 * var(--i));/*формула для распределения карточек по слоям*/
    box-shadow: 25px 25px 100px rgba(0,0,0,0.2);/*тень для карточки*/
    transition: 0.5s;/*плавный переход*/
    display: flex;/*технология флексбокс*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
}

Трансформация сложенных карточек на CSS

Пока карточки лежат в стопке, сделаем текст прозрачным.


.container .card .content{
    color: #444;/*цвет текста*/
    opacity: 0;/*элемент полностью прозрачный*/
    transform: translateY(50px);/*смещение по оси Y*/
    transition: 0.5s;/*плавность действий*/
    transition-delay: 0s;/*задержка*/
    padding: 25px;/*поля вокруг текста*/
    text-align: center;/*текст в центре*/
}

Трансформация сложенных карточек на CSS

Общие CSS-свойства для всех карточек для hover-эффекта.


.container:hover .card{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;/*значение слоя*/
    opacity: 1;/*элемент полностью непрозрачный*/
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);/*создание тени*/
}

Персональное обращение к каждой карточке через CSS псевдокласс :nth-child() для указания формулы, рассчитывающей трансформацию, угол поворота и искажения.


.container:hover .card:nth-child(1){
    transform: translate(calc(-50% - 350px),-50%) rotate(0deg) skew(0deg,0deg);/*формула*/
    z-index: 3;/*порядковый номер слоя*/
}
.container:hover .card:nth-child(2){
    transform: translate(calc(-50% - 0px),-50%) rotate(0deg) skew(0deg,0deg);
    z-index: 2;/*порядковый номер слоя*/
}
.container:hover .card:nth-child(3){
    transform: translate(calc(-50% + 350px),-50%) rotate(0deg) skew(0deg,0deg);
    z-index: 1;/*порядковый номер слоя*/
}
.container:hover .card .content{
    opacity: 1;/*элемент полностью непрозрачный*/
    transition-delay: 0.5s;/*задержка трансформации*/
    transition-delay: calc(0.2s * var(--j));/*вычисление задержки по формуле*/
    transform: translateY(0px);
}

Трансформация сложенных карточек на CSS

Посмотрите пример на CodePen

Источник

Читайте также