Iter Ator Iter Ator - 5 months ago 27
CSS Question

How to transform square to isosceles trapezoid?

I have a 200*200 px div, and I would like to transform it to an Isosceles Trapezoid, where the base, and the height is still 200px, but the a side should be 100px.

Isosceles Trapezoid

The original square is 200*200px. The

h
, and
b
sides should be booth 200px, and the
a
side should be 100px.

I tried to combine skew, scale, and rotate, but I have no idea, how to manage it. Maybe I should use the
transform: matrix(n,n,n,n,n,n)
function, but I don't really know, how to make a transformation matrix for this project.

Answer

Maybe like this

div.transform {
  perspective: 400px;
  transform-origin: 100px 200px;

  width: 200px;
  height: 200px;

  display: inline-block;
  background-color: magenta;
}
div.transform img {
  transform-origin: 100px 200px 0;
  transform: rotate3d(1,0,0, 45deg) scale3d(1, 1.89, 1);
}

See Codepen

Comments