<!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图片翻转的更多相关文章

  1. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  2. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  3. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

  4. 使用 jQuery & CSS3 实现翻转的作品集滑块

    作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...

  5. CSS3的翻转效果

    css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...

  6. 超厉害的CSS3图片破碎爆炸效果！

    var fx  = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...

  7. 原生js如何实现图片翻转旋转效果？

    原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...

  8. HTML+CSS之光标悬停图片翻转效果

    设计思路:         首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进 ...

  9. 纯CSS3图片反转

    一些简单实用的小技巧,CSS3对图片进行翻转,显示另一面的文字,或者图片效果,那么具体怎样去做呢?一起来看看吧. 在CSS3中,可以使用transform-style: preserve-3d进行3d ...

随机推荐

  1. Pyqt 国际化多语言支持

    国际化是指在代码设计上加入能方便的移植到其他国家和地区的特性, 给Pyqt 添加国际化支持需要五步 一.编写GUI.py 在要被翻译的text上用tr方法括起来 # -*- coding: utf-8 ...

  2. android:ellipsize的使用（转）

    EidtText和textview中内容过长的话自动换行,使用android:ellipsize与android:singleine可以解决,使只有一行. EditText不支持marquee 用法如 ...

  3. You don't have permission to access /index.php on this server

    <Directory /> #AllowOverride none #Require all denied</Directory>

  4. windows消息钩子注册底层机制浅析

    标 题: [原创]消息钩子注册浅析 作 者: RootSuLe 时 间: 2011-06-18,23:10:34 链 接: http://bbs.pediy.com/showthread.php?t= ...

  5. Python学习笔记（二）——HelloWorld

    一.交互式化环境下书写代码 二.使用文本编辑器编辑.py文件 1.建议,使用Nodepad++,好看,免费,度娘直接搜素即可. 2.编写代码 3.保存为.py结尾的文件 4.使用cmd,打开到文件所在 ...

  6. JavaOO面向对象中的注意点

    1.JavaOO宗旨思想: ★万物皆对象,对象因关注而产生★ ☆类是对象的抽取,对象是类的实例☆ 2.JavaOO的三大特征: 封装.继承.多态  (第四大特征 抽象 现还有争议) 3.属性与行为: ...

  7. python 线程之 数据同步 Queue

    Queue:将数据从一个线程发往另外一个线程比较通用的方式是使用queue模块的Queue类 1, 首先创建一个Queue模块的对象,创建Queue对象可以传递maxsize也可以不传递 2. 使用对 ...

  8. 【填坑向】spoj COT/bzoj2588 Count on a tree

    这题是学主席树的时候就想写的,,, 但是当时没写(懒) 现在来填坑 = =日常调半天lca(考虑以后背板) 主席树还是蛮好写的,但是代码出现重复,不太好,导致调试的时候心里没底(虽然事实证明主席树部分 ...

  9. android开发中fragment获取context

    在用到fragment时无法使用.this来指定当前context内容,android开发中fragment获取context,可以使用getActivity().getApplicationCont ...

  10. 转:ibatis动态sql

    转:ibatis动态sql 直接使用JDBC一个非常普遍的问题就是动态SQL.使用参数值.参数本身和数据列都是动态SQL,通常是非常困难的.典型的解决办法就是用上一堆的 IF-ELSE条件语句和一连串 ...