html图片斜起来,css3实现超立体3D图片侧翻倾斜效果

上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。

如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。

另外你也可以在这里查看DEMO演示，鼠标滑过图片时会出现这样的效果。

那么接下来我们分析一下源码吧，显示html代码，非常简单：

复制代码代码如下:

Autumn, by Lucien Agasse

这里用了HTML5的 figure标签，表示插图，没什么特别。

然后是CSS代码：

复制代码代码如下:

figure {

margin: 0;

width: 100%;

height: 29.5vw;

background: url("winter-hat.jpg");

background-size: 100%;

transform-origin: center bottom;

transform-style: preserve-3d;

transition: 1s transform;

}