zoukankan      html  css  js  c++  java
  • css3 SD效果

    <div class="container">
      <h1>CSS3 鼠标滑过3D效果</h1>
      <div class="show">
        <div class="item">
          <img src="image/1.jpg" alt="" />
          <span class="active">
          <h3>网站标题</h3>
          <p>闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,终回流澳门退休。</p>
          </span>
        </div>
      </div>

    </div>

    .show{
    320px;
    height:140px;
    display:inline-block;
    margin:1.2rem 0.4rem;
    position:relative;
    cursor:pointer;
    border-radius:10px;
    }

    .item{
    320px;
    height:140px;
    display:block;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -mo-transform-style:preserve-3d;
    transition:transform 0.6s ;
    -webkit-transition:transform 0.6s ;
    -moz-transition:transform 0.6s ;
    -ms-transition:transform 0.6s ;
    }

    当鼠标滑过 div出现3D 效果
    .item:hover{
    -webkit-transform: translateZ(-50px) rotateX(95deg);
    -moz-transform: translateZ(-50px) rotateX(95deg);
    -ms-transform: translateZ(-50px) rotateX(95deg);
    -o-transform: translateZ(-50px) rotateX(95deg);
    transform: translateZ(-50px) rotateX(95deg);
    }

    .item img{
    320px;
    height:140px;
    position:absolute;
    top:0;
    background-position:center center;
    -transform:translateZ(60px);
    -webkit-transform:translateZ(60px);
    -moz-transform:translateZ(60px);
    -ms-transform:translateZ(60px);
    transition:all 0.6s;
    -webkit-transition:transform 0.6s ;
    -moz-transition:transform 0.6s ;
    -ms-transition:transform 0.6s ;
    -o-transition:all 0.6s;
    box-shadow:5px 5px 5px 5pxrgba(0,0,0,0.3);
    border-radius:10px;
    }

    .active{
    display:block;
    position:absolute;
    top:0;
    320px;
    height:140px;
    text-align:left;
    padding:6px 8px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    border-radius:10px;
    background:#fff;
    box-shadow:0px 5px 5px 5px rgba(0,0,0,0.3);
    transform:rotateX(-90deg) translateZ(60px);
    -webkit-transform:rotateX(-90deg) translateZ(60px);
    -moz-transform:rotateX(-90deg) translateZ(60px);
    -ms-transform:rotateX(-0deg) translateZ(60px);
    transition:all 0.6s;
    -webkit-transition:transform 0.6s ;
    -moz-transition:transform 0.6s ;
    -ms-transition:transform 0.6s ;
    -o-transition:all 0.6s;
    }

    .active p{
    text-indent:1.2rem;
    }

    .active h3{
    text-align:center;
    line-height:8px;
    }

  • 相关阅读:
    Hihocoder 1275 扫地机器人 计算几何
    CodeForces 771C Bear and Tree Jumps 树形DP
    CodeForces 778D Parquet Re-laying 构造
    CodeForces 785E Anton and Permutation 分块
    CodeForces 785D Anton and School
    CodeForces 785C Anton and Fairy Tale 二分
    Hexo Next 接入 google AdSense 广告
    如何统计 Hexo 网站的访问地区和IP
    Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points
    通过ODBC接口访问人大金仓数据库
  • 原文地址:https://www.cnblogs.com/suriz/p/6498163.html
Copyright © 2011-2022 走看看