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。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

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

  • 相关阅读:
    How to install cacti With Nginx
    RPM方式安装MySQL5.6
    mysql高可用方案比较
    甲骨文推出MySQL Fabric,简化MySQL的高可用性与可扩展性
    Atitit.数据库表的物理存储结构原理与架构设计与实践
    Atitit.数据库表的物理存储结构原理与架构设计与实践
    Atitit.java jna 调用c++ dll 的总结
    Atitit.java jna 调用c++ dll 的总结
    Atitit.一些公司的开源项目 重大知名开源项目attilax总结
    Atitit.一些公司的开源项目 重大知名开源项目attilax总结
  • 原文地址:https://www.cnblogs.com/ChampionLam/p/3987160.html
Copyright © 2011-2022 走看看