CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转。
请看效果:亲,请点击这里
这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。
HTML结构:
<div id="content">
<div class="list">
<img src="../Images/1.jpg">
<div class="text">
这是小狗哦!!
</div>
</div>
<div class="list">
<img src="../Images/2.jpg">
<div class="text">
这是小狗哦!!
</div>
</div>
</div>
CSS样式:
<style type="text/css">
*{margin:0px;padding:0px;}
#content{
width:500px;
margin:30px auto;
}
.list{
width:200px;
margin:25px;
float:left;
position:relative;
}
.list img{
width:200px;
height:200px;
transform:perspective(200px) rotateY(0deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.text{
height:200px;
width:200px;
line-height:200px;
background:#000;
color:#fff;
opacity:;
position:absolute;
text-align:center;
font-weight:bold;
top:0px;
left:0px;
transform:perspective(200px) rotateY(-180deg);
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.list:hover img{
transform:perspective(200px) rotateY(180deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.list:hover .text{
transform:perspective(200px) rotateY(0deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
</style>
代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。
享受代码,享受生活,网页效果,每日一更。
CSS3之图片3D翻转效果(网页效果--每日一更)的更多相关文章
- 一款纯css3实现的图片3D翻转幻灯片
之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览 源码下载 实现的代码. ht ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- WPF实现3D翻转的动画效果
1.前端代码实现 1.1 原理见代码注析 <Grid MouseDown="Grid_MouseDown"> <Viewport3D> <Viewpo ...
- 图片3d轮放查看效果
本功能比較简单,就是一个大幕.左右滚动播放图片. 关键点在于怎样实现平滑的滚动,包含动画效果,3d效果等. <style> img { position: absolute; top:20 ...
- css3为图片添加鼠标移入放大效果
只需要为添加效果的图片定义一个伪类 img.zoom-img:hover { -webkit-transform: scale(1.15); -webkit-transition-timing-fun ...
- 图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放
上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...
随机推荐
- Java程序调用javascript等脚本的实现方法
public static void main(String[] args) throws FileNotFoundException, ScriptException, NoSuchMethodEx ...
- win8 vs2010 openni2 配置
打开一个新项目或者已存在的项目用以使用 OpenNI 在Visual Studio 菜单中, 打开项目菜单,选择项目属性. 在C/C++ 选项卡中, 在"常规" 下, 选择 &q ...
- css例子
6.背景图像渐变的制作body{ background:#ccc url(xxx.gif)rpeat-x或y:} 7.给一个区块加上背景#branding{ width:700px: height:2 ...
- HTML字体及颜色设置
字体(FONT)标记(TAGS) 标题字体(Header) <h#> ... </h#> #=1, 2, 3, 4, 5, 6<h1>今天天气真好!</h1& ...
- 类Collections的静态方法的使用(代码)
package cn.itcast.p2.toolclass.collections.demo; import java.util.ArrayList; import java.util.Collec ...
- 查询目前运行状态-CPU等情况
对目前的数据库的运行状况有一个基本的了解 ) DB_NAME(a.dbid) AS dbname , loginame , spid , cpu , b.text , lastwaittype , w ...
- python 实现彻底删除文件夹和文件夹下的文件
python 中有很多内置库可以帮忙用来删除文件夹和文件,当面对要删除多个非空文件夹,并且目录层次大于3层以上时,仅使用一种内置方法是无法达到彻底删除文件夹和文件的效果的,比较low的方式是多次调用直 ...
- Tomcat如何配置环境变量
1, JDK:版本为jdk-7-windows-i586.exe 下载地址: http://www.oracle.com/technetwork/java/javase/downloads/index ...
- Java printf
- ios xcode 下 报出 ”xx“is missing from working copy 的问题
在项目中提交过svn后,再在本机上删除不用的图片资源后,build后会有 ”xx“is missing from working copy 的警告.在网上找了些资料后,总结下. 直接在终端下用s ...