html5和css3炫酷图片3d翻转多米诺动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款为移动设备定制的、效果炫酷的html5和css3图片3d翻转多米诺动画特效插件。

HTML

我们使用html5来制作这款插件。主要通过<figure>和<figcaption>来组织代码。

<div>
    <figure>
    <figcaption>Autumn, by Lucien Agasse</figcaption>
    </figure>
</div>

CSS样式

<div>元素将用来制作3D perspective效果。

div {
    perspective: 1000px; width: 33%;
    margin: 0 auto;
    margin-top: 3rem;
}

<figure>元素将包含一个100%宽度的背景图片，它的高度被切断，使用vm做单位（这样会使高度响应浏览器的宽度）。

figure {
    margin: 0; width: 100%; height: 29.5vw;
    position: relative; background-size: 100%;
    background: url("winter-hat.jpg");
    transform-origin: center bottom;
    transform-style: preserve-3d;
    transition: 1s transform;
}

<figure>元素的transform-origin被设置为从底边“摆动”，就像一个地库的门。接下来给图片标题样式：

figcaption {
    width: 100%; height: 50px;
    position: relative; top: 29.5vw;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("winter-hat.jpg");
    background-size: 100%;
    background-position: bottom;
    color: #fff;
    transform-origin: center top;
    transform: rotateX(-89.9deg);
    font-size: 1.2vw; text-align: center;
    line-height: 3;
}

<figcaption>元素有一定的高度，它被放置到<figure>元素高度被切断的地方。它的背景图片和<figure>一样，只是它的位置从底部开始。

创建阴影

阴影使用<figcaption>的伪元素来制作。

figure:before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1),
    inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
    transition: 1s;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: inherit;
}

添加Transition

<figure>和它的阴影的动画在鼠标滑过图片时出现：

div:hover figure {
    transform: rotateX(75deg) translateZ(5vw);
}
div:hover figure:before {
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5),
    inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
    transform: rotateX(-5deg) translateZ(-80px) scale(1);
}

<figure>元素在开始动画时被向后旋转，box-shadow以反方向向上运动与它回合，与此同时，阴影变暗和加重。作为<figure>元素的一部分（还因为前面我们添加了transform-style: preserve-3d），<figcaption>也做同步动画。

添加断点（Adding Breakpoints）

这个图片效果在大屏幕上是非常完美的，但是在小屏幕上，我们需要做些调整。如果屏幕小于320像素，我们不能够设置<div>为屏幕的1/3宽。<figcaption>也需要做些调整。

@media screen and (max-width: 800px) {
    div { width: 50%; }
    figure { height: 45vw; }
    figcaption { top: 45vw; font-size: 2vw; }
}
@media screen and (max-width: 500px) {
    div { width: 80%; margin-top: 1rem; }
    figure { height: 70vw; }
    figcaption { top: 70vw; font-size: 3vw; }
}