<!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的用法例子的更多相关文章

  1. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  2. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  3. css3 calc()的用法

    转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...

  4. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  5. include的用法例子，以及include+merge的用法例子

    [include+LinearLayout]的使用例子 AndroidIncludeLayout.java package com.AndroidIncludeLayout; import andro ...

  6. CSS3的基础用法

    CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...

  7. 一个关于css3背景透明的例子

    大家都知道使用opacity调节透明度不仅是背景透明了而且选择区域的文字也跟着透明了, 这是我们不想要的效果,于是强大的css3便有了只让背景透明的功能 那就是background:rgba(0,0, ...

  8. 类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

    1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...

  9. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

随机推荐

  1. collections模块-namedtuple

    namedtuple -> 命名元组 这里的命名指的是对元组中元素的命名. 通过一个例子来看 import collections Person = collections.namedtuple ...

  2. jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者 ...

  3. 仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...

  4. 国庆 day 7 下午

    思路:见博客. #include<iostream> #include<cstdio> #include<cstring> #include<algorith ...

  5. 基于机器学习的web异常检测——基于HMM的状态序列建模，将原始数据转化为状态机表示，然后求解概率判断异常与否

    基于机器学习的web异常检测 from: https://jaq.alibaba.com/community/art/show?articleid=746 Web防火墙是信息安全的第一道防线.随着网络 ...

  6. pandas入门10分钟——serries其实就是data frame的一列数据

    10 Minutes to pandas This is a short introduction to pandas, geared mainly for new users. You can se ...

  7. PostgreSQL Replication之第六章 监控您的设置（3）

    6.3 检查操作系统进程 一旦我们检查了归档以及我们的系统视图,我们就准备检查系统 进程.检查系统进程可能看起来有点粗糙,但它被证明非常有效. 在master上,我们可以简单地检查一个名为wal_se ...

  8. dedecms4张关键表解析之1

    虽然dedecms默认共有87张表,但是只有4张最核心,最最要的表. 1.第一张表:dede_arctype  栏目表 dede设计者认为不管存放什么样的数据(文章,商品,电影)都应该属于某个栏目(类 ...

  9. HDU 2515 Yanghee 的算术【找规律】

    题意:中文的题目 找规律可以发现 sum[1]=a[1]+a[2] sum[2]=a[1]+a[3] sum[n]=a[2]+a[3] 解出a[1],就可以求出其他的了 #include<ios ...

  10. PUBG

    题目描述 最近,喜爱ACM的PBY同学沉迷吃鸡,无法自拔,于是又来到了熟悉的ERANGEL.经过一番搜寻,PBY同学准备动身前往安全区,但是,地图中埋伏了许多LYB,PBY的枪法很差,希望你能够帮他找 ...