CODEWITHSUNDEEP
htmlcss
user5718206
user5718206

Reputation:

CSS3 bending/perspective effect

For example, I have such a picture: Default image

And I need to make it like that with CSS3. With a kind of perspective in the top (area marked with red border): Image with perspective

Is it even possible to make such an effect using only 1 image and CSS3 styles?

Upvotes: 2

Views: 401

Answers (1)

vals
vals

Reputation: 64194

I have set a div with your image as background.

On a pseudo element, the same background, and this pseudo has a transform of rotation and perspective.

Another pseudo, in the same position, to mask the upper part of the original image

.test {
  width: 600px;
  height: 230px;
  border: solid 1px red;
  background-image: url(https://i.sstatic.net/wQ1Bp.png);
  background-size: 600px 230px;
  position: relative;
}
.test:after,
.test:before {
  content: "";
  width: 100%;
  height: 30%;
  top: 0px;
  position: absolute;
}
.test:before {
  background-color: white;
}
.test:after {
  background-image: inherit;
  background-size: inherit;
  border: solid 1px green;
  transform: perspective(400px) rotateX(50deg);
  transform-origin: center bottom;
}
<div class="test"></div>

Upvotes: 2

Related Questions