Iter Ator Iter Ator - 1 year ago 97
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

, and
sides should be booth 200px, and the
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 Source

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