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

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

转载于:https://www.cnblogs.com/ChampionLam/p/3987160.html

CSS3之图片3D翻转效果(网页效果--每日一更)相关推荐

html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
html3d上下翻转4面效果,花式实现图片3D翻转效果
闲话曾经在闲逛时,看到有一个很炫的3D翻转切换图片的效果.地址在这里:https://tympanus.net/Development/Slicebox/index.html 一直想搞一个,最近撸出 ...
花式实现图片3D翻转效果
闲话曾经在闲逛时,看到有一个很炫的3D翻转切换图片的效果.地址在这里:https://tympanus.net/Development/Slicebox/index.html 一直想搞一个,最近撸出 ...
css3为图片添加鼠标移入放大效果
css3为图片添加鼠标移入放大效果只需要为添加效果的图片定义一个伪类 img.zoom-img:hover {-webkit-transform: scale(1.15);-webkit-trans ...
php图片特效,css3实现图片头像扫光高亮效果
css3出来后,之前很多flash才能做的效果,现在甚至不用写一句js,单纯靠css3新增的属性就能轻松实现! css3实现图片头像扫光高亮效果,源码: 测试 *{margin:0;padding:0 ...
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用 ...
用css3实现图片左右翻转
css3越来越受关注,自己也捣鼓个图片左右翻转的效果,供大家参考(有写的不好的地方欢迎指正). 一.样式: .FZ{ width:640px; margin:0 auto; border:1px so ...
图片3D翻转效果 --摘自李硕老师博客160305
原文地址:http://blog.csdn.net/u012215170/article/details/50421023 ndroid手机上有众多的炫酷的设计风格,动画必然是APP的一大亮点,所以一 ...
html5 css3替换图片,移动Web—CSS为Retina屏幕替换更高质量的图片
特别声明:此篇文章根据Stéphanie Walter 的英文文章<The Mobile Web: CSS Image Replacement for Retina Display Device ...

CSS3之图片3D翻转效果(网页效果--每日一更)

CSS3之图片3D翻转效果(网页效果--每日一更)相关推荐

最新文章

热门文章