Блог

Главная - Вопросы по программированию - Поворот div, а затем последующее расширение

Поворот div, а затем последующее расширение

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Я пытаюсь повернуть div при наведении курсора мыши, а затем расширить его правую сторону под наклонным углом. Мне удалось добиться расширения div при наведении курсора мыши.

 div{
   height: 200px;
    width: 200px;
    background-color:wheat;
    transition: .2s;
    margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
    overflow: hidden;
}

div:after{
 -webkit-transition: .2s;
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  width: 0px;
  height: 200px;
  background: wheat;
  overflow: hidden;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
  margin-left: 10em;
  margin-top: 1em;
  }

div:hover:after {
  -webkit-transition: .2s;
  transition: .2s;
  width: 200px;
  height: 200px;
  background: wheat;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
   margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
  }  
 <div>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

Но когда я пытаюсь повернуть основной div с transform: rotate(-45deg); помощью, следующий псевдоэлемент не запускается. Есть ли способ сделать это? или есть хотя бы альтернатива javascript, которая упростила бы весь этот процесс?

Комментарии:

1. положение: относительно div удалить переполнение: скрыто удалить p margin

Ответ №1:

Если я правильно вас понимаю, вы хотите что-то вроде этого

 div{
   height: 200px;
    width: 200px;
    background-color:wheat;
    transition: .2s;
    margin-top: 10em;
    margin-left: 10em;
    margin-bottom: 10em;
}

div:hover {
  transform: rotate(-45deg);
}

div:after{
 -webkit-transition: .2s;
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 65%;
  width: 0px;
  height: 200px;
  background: wheat;
  overflow: hidden;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
  }

div:hover:after {
  -webkit-transition: .2s;
  transition: .2s;
  width: 200px;
  height: 200px;
  background: wheat;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: skew(-35deg);
          transform: skew(-35deg);
  z-index: -1;
    margin-left: 4em;
  }
  
  p {
    margin: 0;
  }  
 <div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

Ответ №2:

 div{
   height: 200px;
    width: 200px;
    transition: .2s;
    margin-top: 1em;
    margin-left: 10em;
    margin-bottom: 10em;
    position: relative;
}

div:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: wheat;
  z-index: -1;
  transition: all 1s ease;
  }

div:hover:before {
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg) ;
          transform: rotate(180deg);
          transition: all 1s ease;
 
  }
  
  div::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
 width: 0;
      height: 0;
      border-top: 200px solid wheat;
      border-right: 200px solid transparent;
  z-index: -2;
  opacity: 0;
  transition: all 300ms ease;
  }
  @keyframes example {
  from {Opacity: 0;right: 0}
  to {opacity: 1;right: -200px;}
}
  div:hover::after {
  animation-delay: 1s;
  animation: example forwards;
  animation-duration: 1s;
  transition: all 300ms ease;
  }  
 <div>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

Я изменил before после css и также использовал анимацию.

Ответ №3:

Проблема, похоже, заключалась в том, что вы overflow:hidden установили элемент div, хотя почему псевдоэлемент все еще был виден без поворота, для меня несколько загадочно.

 div {
  height: 200px;
  width: 200px;
  background-color: wheat;
  transition: .2s;
  margin-top: 1em;
  margin-left: 10em;
  margin-bottom: 10em;
  position: relative;
}

div:hover {
  transform: rotate(-60deg);
}

div:after {
  transition: .2s;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: wheat;
  transform-origin: 100% 0;
  transform: skew(-0deg);
  z-index: -1;
}

div:hover:after {
  transform: skew(-35deg);
}  
 <div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>