css3图片翻转
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3旋转效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
font-family: 微软雅黑;
}
body{
background:orange;
}
#main{
width:1280px;
height:473px;
margin:10px auto;
}
#main ul li{
width:320px;
height:470px;
margin-left: 8%;
float:left;
position:relative;
}
#main ul li img{
border:10px solid darkturquoise;
-webkit-transition:1s ease;
-moz-transition:1s ease;
}
#main .info{
width:240px;
height:230px;
border:10px solid blueviolet;
background:#deddcd;
position:absolute;
bottom:-30px;right:0;
-webkit-transition:1s ease;
-moz-transition:1s ease;
-moz-transform:rotatey(30deg);
-webkit-transform:rotatey(30deg);
}
#main .info h2{
text-align:center;
line-height:70px;
color:#7a3f3a;
font-weight:normal;
font-size:20px;
}
#main .info p{
padding:0 20px;
font-size:14px;
}
#main .info a{
display:block;
width:100px;
height:30px;
background:blue;
color:#FFF;
border-radius:5px;
text-decoration:none;
text-align:center;
line-height:30px;
margin:10px auto;
}
#main ul li:hover .info{
-webkit-transform:rotatey(0deg);
-moz-transform:rotatey(0deg);
right:30px;
bottom:-50px;
}
#main ul li:hover img{
-webkit-transform:rotatey(360deg);
-moz-transform:rotatey(360deg);
}
</style>
</head>
<body>
<div id="main">
<ul>
<li> <img src="img/I-1.jpg" width="300" height="450" />
<div class="info">
<h2>旺财</h2>
<p>忧伤的旺财</p>
<a href="#">点击进入</a>
</div>
</li>
<li> <img src="img/I-2.jpg" width="300" height="450" />
<div class="info">
<h2>竹林</h2>
<p>翠绿的竹林</p>
<a href="#">点击进入</a>
</div>
</li>
<li> <img src="img/I-3.jpg" width="300" height="450" />
<div class="info">
<h2>光明</h2>
<p>有光的地方就有希望</p>
<a href="#">点击进入</a>
</div>
</li>
</ul>
</div>
</body>
</html>
web前端免费学习资料，搜【WEB前端互动交流群】
css3图片翻转的更多相关文章
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
- 使用 jQuery & CSS3 实现翻转的作品集滑块
作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...
- CSS3的翻转效果
css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...
- 超厉害的CSS3图片破碎爆炸效果！
var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...
- 原生js如何实现图片翻转旋转效果？
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- HTML+CSS之光标悬停图片翻转效果
设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...
- 纯CSS3图片反转
一些简单实用的小技巧,CSS3对图片进行翻转,显示另一面的文字,或者图片效果,那么具体怎样去做呢?一起来看看吧. 在CSS3中,可以使用transform-style: preserve-3d进行3d ...
随机推荐
- $().click(function(){}) 不管用 live()替代品 append之后
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别 ...
- android中设置控件获得焦点 （转）
android中,要使控件获得焦点,需要先setFocus,再requestFocus. 以Button为例: btn.setFocusable(true); ...
- 关于DOM的一些操作 整理 积累
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- 我的c++学习(12)指针作为函数参数
◆ 引用调用与指针传值调用C++中函数的参数的基本使用方法是传值.为了弥补单纯传值的不足,以引用作为函数的参数,从逻辑上讲引用是别名,在函数中对参数的操作,就是对实参的操作,而在物理上是传实参的地址. ...
- [LeetCode] Single Number
Given an array of integers, every element appears twice except for one. Find that single one. Note: ...
- Spring Boot下配置MyBatis多数据源
http://m.blog.csdn.net/article/details?id=51481911
- ASP.NET Cache缓存的用法
本文导读:在.NET运用中经常用到缓存(Cache)对象.有HttpContext.Current.Cache以及HttpRuntime.Cache,HttpRuntime.Cache是应用程序级别的 ...
- Spring任务调度之Timer
一.分类 由于现在大部分的系统都是采用了spring,所以所有的例子都结合spring来构建,目前主要的任务调度分为三种: Java自带的java.util.Timer类,这个类允许你调度一个java ...
- Oracle数据库字符集试验
对于初学者我们可以理解字符集就是一种字符编码方式,试想人可以直接语言进行交流,使用文字进行记录,而计算机却不认得我们人类创立的文字,计算机只认得0和1这样的二进制代码.当我们要通过计算机记录文字信息的 ...
- MySQL Replication需要注意的问题
MySQL Replication 大家都非常熟悉了,我也不会写怎么搭建以及复制的原理,网上相关文章非常多,大家可以自己去搜寻.我在这里就是想总结一下mysql主从复制需要注意的地方.有人说主从复制很 ...