zoukankan      html  css  js  c++  java
  • 纯CSS3实现超立体的3D图片侧翻倾斜效果

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

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

    <div onclick=""><br>  <figure><br>    <figcaption>Autumn, by Lucien Agasse</figcaption><br>  </figure><br></div>

    这里用了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;
    }
    figure figcaption { 
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
    url("winter-hat.jpg");
    background-size: 100%; height: 50px;
    background-repeat: no-repeat;
    background-position: bottom;
    color: #fff; 
    position: relative; top: 29.5vw;
    transform-origin: center top;
    transform: rotateX(-89.9deg);
    font-size: 1.2vw;
    font-family: Montserrat, Arial, sans-serif;
    text-align: center;
    line-height: 3;
    }
    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;
    }


    这里我们定义了figure的背景图片,也就是我们要实现3d效果的那张图片。同时还定义了图片的描述信息样式,这样在图片侧翻后更加凸显立体效果。
    接下来就是鼠标滑过的动画效果了:

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


    很容易可以看出这里利用了css3的transform属性,其中rotateX来翻转,translateZ来实现Z轴的3D转换,思路都非常清晰。

  • 相关阅读:
    代码转换为html显示
    subprocess实时获取结果和捕获错误
    centos7开放端口和防火墙设置
    Inside The C++ Object Model(一)
    知其所以然(以算法学习为例)
    sql语法
    DLL断点调试
    我的算法学习之路
    算法系列之一
    cocos2d-x游戏引擎核心(3.x)----事件分发机制之事件从(android,ios,desktop)系统传到cocos2dx的过程浅析
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5010839.html
Copyright © 2011-2022 走看看