css3 scale的用法例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.icon-img{
display: block;
margin-top: 5px;
width: 140px;
height: 140px;
margin: 9px auto 0;
position: relative;
}
.icon-img img{
display:block;
position: relative;
z-index: 1;
width: 95%;
top: 50%;
left: 50%;
top: 0\9;
left: 0\9;
top: 50%\9\0;
left: 50%\9\0;
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-moz-transition: width .3s;
-ms-transition: width .3s;
-o-transition: width .3s;
-webkit-transition: width .3s;
transition: width .3s;
}
.icon-img:hover img {
width:105%!important
}
</style>
</head>
<body>
<div class="icon-img">
<img alt="" src="http://img.alicdn.com/bao/uploaded/TB1l3QFLpXXXXaoXVXXSutbFXXX.jpg">
</div>
</body>
</html>

css3 scale的用法例子的更多相关文章
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- css3 calc()的用法
转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- include的用法例子,以及include+merge的用法例子
[include+LinearLayout]的使用例子 AndroidIncludeLayout.java package com.AndroidIncludeLayout; import andro ...
- CSS3的基础用法
CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...
- 一个关于css3背景透明的例子
大家都知道使用opacity调节透明度不仅是背景透明了而且选择区域的文字也跟着透明了, 这是我们不想要的效果,于是强大的css3便有了只让背景透明的功能 那就是background:rgba(0,0, ...
- 类似今日头条,头部tab可滑动,下面的内容可跟着滚动,掺杂着vue和require等用法例子
1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...
- CSS3的filter用法
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
随机推荐
- Linux头文件的设置
GCC/G++会查找系统默认的include和link的路径,以及自己在编译命令中指定的路径. 1.include头文件路径 除了默认的/usr/include, /usr/local/include ...
- 国庆 day 3 上午
a[问题描述] 你是能看到第一题的 friends 呢. ——hja 怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给 出了一种分单词的方法,何大爷认为两个单词是同一类的当这两个单词的 ...
- 项目集成Hudson+SonarQube出现的一个问题
[ERROR] No plugin found for prefix 'sonar' in the current project and in the plugin groups [org.mort ...
- 使用sh运行bash脚本的奇怪问题
在同一个文件夹下有两个脚本.a.sh和b.sh,脚本内容例如以下: a.sh: echo "test for a" source b.sh b.sh: echo "tes ...
- zoj 1655 单源最短路 改为比例+最长路
http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=655 没有理解清题意就硬套模板.所以WA了好几次. 解析看我的还有一篇http ...
- how to deal with "no such file error or diretory" error for a new programmer in QT creator
when i try to develop a hello demo in QT creator with the code following : #include<QApplication& ...
- 微信开发出现 redirect-uri參数错误原因是设置回调页面域名不要加HTTP://
OAuth2.0 网页授权设置.回调页面域名不要加HTTP:// NND 微信的研发.你程序处理下非常麻烦吗?给个提示非常麻烦吗?让我查了1个多小时.
- Visual Assist X 10.8.2036的Crack破解补丁.2014.05.22 (General release.)
说起来,VA公布上一个Genreal Release版本号已经是过春节那阵子时候的事了,时间过得真快. VA小组又给我们带来了新版本号的Visual Assist编码助手的 2036 版本号, 这个版 ...
- ubuntu 非长期支持版升级系统版本号(ssh登录情况适用)
(1)当前系统为非长期支持版.而且已被废弃,仅仅能逐版本号升级 以当前系统版本号为11.10为例 改动source.list更新源为通用old源,由于原来的源已经不可用 deb http://old- ...
- 【试水CAS-4.0.3】第02节_CAS服务端登录页个性化
完整版见https://jadyer.github.io/2015/07/16/sso-cas-login-diy/ /** * @see ------------------------------ ...