html5和css3炫酷图片3d翻转多米诺动画特效

当前位置:主页 > CSS3库 > CSS3动画 > html5和css3炫酷图片3d翻转多米诺动画特效
html5和css3炫酷图片3d翻转多米诺动画特效
分享:

    插件介绍

    这是一款效果炫酷的html5和css3图片3d翻转多米诺动画特效插件。该插件是为移动设备定制的。该图片3d翻转插件当鼠标滑过图片时,图片变为3d立方体像多米诺骨牌一样跌倒,3d立体效果非常强烈。

    浏览器兼容性

    浏览器兼容性
    时间:12-08
    阅读:

简要教程

这是一款为移动设备定制的、效果炫酷的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; }
}
                

适应移动设备

在Mobile中使用:hover伪元素在各种平台上的表现是不一致的,一个快速的、尽管是不十分完美的解决方案是:为<div>元素添加onclick事件。

<div onclick="">