I would like to skew and change perspective of the image (height from top and bottom) going from one direction to another.I am not 100% sure if I am using right terminology but below example should explain what I am trying to achieve.
Example of the image with border:
Example* of how it should appear on my web page:
Or another example from reference question
This is what I have tried
- Get the final image and use it as is but the problem is that the image quality deteriorates when width is changed.
- Bunch of css options http://jsfiddle.net/6ksayLx8/
/*Attempt 1*/
#box {
width: 200px;
height: 200px;
/*background-color:green;*/
position: relative;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#box:after, #box:before {
display: block;
content:"\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
}
/*Attempt 2*/
.skew {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/* the magic ingredient */
-webkit-transform: skew(-16deg, 0);
-moz-transform: skew(-16deg, 0);
-ms-transform: skew(-16deg, 0);
-o-transform: skew(-16deg, 0);
transform: skew(-16deg, 0);
overflow: hidden;
width: 300px;
height: 260px;
position: relative;
left: 50px;
border: 1px solid #666;
}
.skew img {
-moz-transform: skew(16deg, 0);
-ms-transform: skew(16deg, 0);
-o-transform: skew(16deg, 0);
-webkit-transform: skew(16deg, 0);
transform: skew(16deg, 0);
position: relative;
left: -40px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="box">
<img src="http://placehold.it/560x366" class="img-responsive">
</div>
</div>
<div class="col-xs-6">
<div class="skew">
<img src="http://placehold.it/560x366" class="img-responsive">
</div>
</div>
</div>
</div>Other details:
- Website uses Bootstrap3 and so the solution should be responsive
- Image must have border
- I am fine not supporting anything less than IE 9
I have gone thru many links and different search terms in Google below are worthy to be mentioned:
*Please discard the difference of color and scroll bar in this example image. This is just an example to explain outcome.
