How to Animate the height of a skewed rectangle?

Question

I am trying to make an animation on hover of a rectangle. What I am trying to achieve is to make the Rectangle take the full height on tilt like it is shown and I don't want to be straighten. This is what I've done so far. I also used transform matrix but I didn't have good result

.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>

Temani Afif · Accepted Answer · 2019-03-25T11:50:41.870

You can combine a height and transform animation like below:

.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>

If you want to keep the skew effect simply adjust the height:

.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>

Using scale you can try this (pay attention to the order of transform)

.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>

Another idea with rotation:

.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>

Again it straighten up, I want to move like it is not to straighten — John, Mar 25 '19 at 11:39
@TemaniAfif do u know how to make it to take the full width, after this transform? — John, Mar 25 '19 at 12:53
no, it doesn't work... What i mean is after this animations i want that div to expand in full width — John, Mar 25 '19 at 13:48

Mr Lister · Answer 2 · 2019-03-25T11:49:35.000

1

Simply include the skew in the hovered transition again. The problem was that you transitioned from skew(-25deg) to the default value of skew, which is 0.

Make sure to include the skew before the scaleY in the hovered stated; the order matters! If you put the skew after the scaleY, it will become stretched vertically, altering the apparent value of the skew.

.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>

edited Mar 25 '19 at 11:49

answered Mar 25 '19 at 11:42

Mr Lister

45,515
15
108
150

or you add scale after the skew to keep the same angle – Temani Afif Mar 25 '19 at 11:46
Whoops, I never realised that the order mattered. I'll update my answer. – Mr Lister Mar 25 '19 at 11:47
yes, it's a matrix mutliplication (https://stackoverflow.com/a/53672795/8620333) so it's not commutative. it can be for some paricluar case by the way – Temani Afif Mar 25 '19 at 11:58

How to Animate the height of a skewed rectangle?

2 Answers2