Как анимировать высоту перекошенного прямоугольника? - PullRequest
Новая
       9

Как анимировать высоту перекошенного прямоугольника?

1 голос
/ 25 марта 2019

Я пытаюсь сделать анимацию при наведении прямоугольника.То, чего я пытаюсь добиться, это заставить прямоугольник принимать полную высоту при наклоне, как показано на рисунке, и я не хочу выпрямляться.Это то, что я сделал до сих пор.Я также использовал матрицу преобразования, но у меня не было хорошего результата 

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: scaleY(50);
}
<div class="square"></div>

Ответы [ 2 ]

5 голосов
/ 25 марта 2019

Вы можете комбинировать высоту и трансформировать анимацию, как показано ниже: 

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg);
  transition: all 1s;
}

.square:hover {
  transform:translate(-50%,-50%) skew(0deg);
  height:100%;
}

body {
 margin:0;
}
<div class="square">
</div>

Если вы хотите сохранить эффект перекоса, просто отрегулируйте высоту: 

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg);
  transition: all 1s;
}

.square:hover {
  height:100%;
}

body {
 margin:0;
}
<div class="square">
</div>

Используя масштаб, вы можете попробовать это (обратите внимание на порядок преобразования) 

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 100%;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg) scaleY(0.1);
  transition: all 1s;
}

.square:hover {
  transform: translate(-50%,-50%) skew(-25deg)  scaleY(1);
}

body {
 overflow:hidden;
 margin:0;
}
<div class="square">
</div>

Еще одна идея с вращением: 

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  box-sizing:border-box;
  width: 100px;
  height: 100%;
  background-color: rgba(252, 207, 39, .2);
  transform: translate(-50%,-50%) skew(-25deg) rotateX(85deg); /*close to 90deg*/
  transition: all 1s;
}

.square:hover {
  transform: translate(-50%,-50%) skew(-25deg) rotateX(0deg);
}

body {
 overflow:hidden;
 margin:0;
}
<div class="square">
</div>
1 голос
/ 25 марта 2019

Просто включите перекос в зависшем переходе снова.Проблема заключалась в том, что вы перешли от skew (-25deg) к значению skew по умолчанию, которое равно 0.

Убедитесь, что вы включили перекос перед шкалой Y в указанном значении;порядок имеет значение!Если вы поместите перекос после шкалы Y, он будет вытянут вертикально, изменяя кажущееся значение перекоса.

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: skew(-25deg) scaleY(50);
}
<div class="square">
</div>
...