zoukankan      html  css  js  c++  java
  • CSS3之图片3D翻转效果(网页效果--每日一更)

      今天,带来的是纯CSS3的效果--图片3D翻转。

      请看效果:亲,请点击这里

      这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。

      HTML结构:

     1     <div id="content">
     2         <div class="list">
     3             <img src="../Images/1.jpg">
     4             <div class="text">
     5                 这是小狗哦!!
     6             </div>
     7         </div>
     8         <div class="list">
     9             <img src="../Images/2.jpg">
    10             <div class="text">
    11                 这是小狗哦!!
    12             </div>
    13         </div>
    14     </div>

      CSS样式:

     1 <style type="text/css">
     2         *{margin:0px;padding:0px;}
     3         #content{
     4             width:500px;
     5             margin:30px auto;
     6         }
     7         .list{
     8             width:200px;
     9             margin:25px;
    10             float:left;
    11             position:relative;
    12         }
    13         .list img{
    14             width:200px;
    15             height:200px;
    16             transform:perspective(200px) rotateY(0deg);
    17             opacity:1;
    18             transition:transform 600ms ease,opacity 600ms ease;
    19             -webkit-transition:transform 600ms ease,opacity 600ms ease;
    20         }
    21         .text{
    22             height:200px;
    23             width:200px;
    24             line-height:200px;
    25             background:#000;
    26             color:#fff;
    27             opacity:0;
    28             position:absolute;
    29             text-align:center;
    30             font-weight:bold;
    31             top:0px;
    32             left:0px;
    33             transform:perspective(200px) rotateY(-180deg);
    34             transition:transform 600ms ease,opacity 600ms ease;
    35             -webkit-transition:transform 600ms ease,opacity 600ms ease;
    36         }
    37         .list:hover img{
    38             transform:perspective(200px) rotateY(180deg);
    39             opacity:0;
    40             transition:transform 600ms ease,opacity 600ms ease;
    41             -webkit-transition:transform 600ms ease,opacity 600ms ease;
    42         }
    43         .list:hover .text{
    44             transform:perspective(200px) rotateY(0deg);
    45             opacity:1;
    46             transition:transform 600ms ease,opacity 600ms ease;
    47             -webkit-transition:transform 600ms ease,opacity 600ms ease;
    48         }
    49     </style>

      代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

      享受代码,享受生活,网页效果,每日一更。

  • 相关阅读:
    python加载csv数据
    Android项目依赖库管理方式简介
    Android PhotoView基本功能实现
    Android ListView的header footer设置visibility gone不起作用
    [干货][EMIT]千行代码实现代理式AOP+属性的自动装配
    Emit实现DataRow转化成强类型的T
    有关docker新版的icc、iptables的一个巨坑
    Mac神器Iterm2的Shell Integration的用法和注意事项
    生成ssl证书文件
    python3 module中__init__.py的需要注意的地方
  • 原文地址:https://www.cnblogs.com/ChampionLam/p/3987160.html
Copyright © 2011-2022 走看看