Необходимо создать эффект открытия ноутбука. Еффект открытия - закрытия крышки ноутбука

Question

Есть 2 картинки, основа и крышка ноутбука, нужно создать анимацию открытия - закрытия крышки ноутбука, основа же остаеться неподвижной. Css или js на ваше усмотрение html можете использовать любой, я использовал:

<div class="laptop__wrapper">
  <div class="top__wrapper">
    <img class="top" src="images/1.png" alt="">
  </div>
  <div class="bottom__wrapper">
    <img class="bottom" src="images/2.png" alt="">
  </div>
</div>

CSS использовал:

.bottom_wrapper{
z-index:1;
}
.top__wrapper{
z-index: 2;
transform: translateY(0) rotateX(360deg) perspective(0) scaleX(1) scaleY(1);
animation: anim 5s linear infinite alternate;
}

@keyframes anim{
 10%{
 transform:
 translateY(0)
 perspective(0)
 scaleX(0)
 rotatex(360deg);
 }
 50%{
 transform:
 translateY(5px)
 perspective(4100px)
 scaleX(1.15)
 rotatex(300deg);
 }
 100%{
 transform:
 translateY(300px)
 perspective(5000px)
 scaleX(1.15)
 rotatex(260deg);
 }
 }

Answer 1

Пример

(function() {

  'use strict';

  const laptopTop = document.querySelector('.laptop__top')

  function toggleLaptop() {
    laptopTop.classList.toggle('laptop__top--active')
  }

  laptopTop.addEventListener('click', toggleLaptop)

})();

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

.laptop {
  text-align: center;
  margin: 2em auto;
  perspective: 2500px;
  perspective-origin: 50% 100%;
  transform-style: preserve-3d;
}

.laptop__top {
  max-width: 600px;
  margin: 0 auto;
  will-change: transform;
  transition: transform .3s ease;
  position: relative;
  overflow: hidden;
  transform-origin: center bottom;
}

.laptop__top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: .5em;
  background-color: #292929;
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

.laptop__top-img {
  position: relative;
  z-index: 2;
}

.laptop__bottom {
  max-width: 720px;
  margin: 0 auto;
}

.laptop__top-img,
.laptop__bottom-img {
  display: block;
  margin: 0 auto;
}

.laptop__top--active {
  transform: rotateX(-100.5deg) rotateY(0deg);
}

.laptop__top--active .laptop__top-img {
  opacity: 0;
}

<div class="laptop">
  <div class="laptop__top">
    <img class="laptop__top-img" src="https://i.ibb.co/bQ1rnm1/top.png" alt="">
  </div>
  <div class="laptop__bottom">
    <img class="laptop__bottom-img" src="https://i.ibb.co/RprQ0Ft/bottom.png" alt="">
  </div>
</div>

БЛОГ НА HUSL

Необходимо создать эффект открытия ноутбука. Еффект открытия - закрытия крышки ноутбука

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