Bending image effect with CSS/JS/jQuery? [closed]

问题

I'm trying to style the images on my website with a slight bending-effect and a shadow below the bended parts of the image - just like this (seen on ebay):

Does somebody know how to achieve? Any suggested jQuery or java-script libraries? Or is it achieveable with CSS only?

回答1:

I did a modification to slash197's answer. It looks exactly like in the picture, at least in Firefox. However it is ridiculously large and needs additional markup.

I put the image container div (most of code by slash197) inside another div. Then I added yet another div and gave it a shadow, then I just positioned it correctly.

HTML:

<div class="container">
    <div class="shadow">&nbsp;</div>
    <div class="img-container">
        <img src="http://your.server.com/path/to/your/image.jpg" />
    </div>
</div>

CSS:

.container {
    position: relative;
    display: inline-block; /* or block */
    margin: 20px; /* not required */
}
.img-container {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    display: inline-block;
    background: white;
    position: relative;
    top: 0;
    left: 0;
}
.shadow {
    box-shadow: 0 20px 5px 5px #cccccc; /* adjust color, blur or spread if you want */
    transform: skewy(-3deg);
    position: absolute;
    left: 8px;
    bottom: 22px; /* adjust this to change the shadow's size */
    height: 20px;
    width: 100px;
}

Here it is in all its glory: http://jsfiddle.net/VCEJB/1/

EDIT: Changed rotate to skewy as it probably looks marginally better.

回答2:

Very simple with CSS only: put the image in a container, style that container with a padding, border, border radius and box shadow.

The box shadow will give you a different shadow than the one in your example but it might be enough for you so you won't need external libraries. Something like this http://jsfiddle.net/k7Kpv/2/

div {
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    box-shadow: 4px 5px 12px -3px #cccccc;
    display: inline-block;
}

来源：https://stackoverflow.com/questions/21302314/bending-image-effect-with-css-js-jquery

标签

javascript

jquery

html

css

css3