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.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
随机推荐
- 洛谷 P3924 康娜的线段树
P3924 康娜的线段树 题目描述 小林是个程序媛,不可避免地康娜对这种人类的“魔法”产生了浓厚的兴趣,于是小林开始教她OI. 今天康娜学习了一种叫做线段树的神奇魔法,这种魔法可以维护一段区间的信息, ...
- nodejs 实现简单 http 代理并缓存
var http = require('http'), fs = require("fs"), url = require('url'), querystring = requir ...
- oracle 11g RAC手动卸载grid,no deinstall
1.通过root用户进入到grid的ORACLE_HOME [root@db01]# source /home/grid/.bash_profile [root@db01]# cd $ORACLE_H ...
- Redis允许远程连接
默认安装启动redis后,只能本地连接,无法远程连接上,原因是redis安全策略默认本机访问,所以远程访问的话需要将 配置文件redis.cof 中的 bind 127.0.0.1 前面的#注释掉, ...
- HDFS的配额
- sql点滴
http://www.cnblogs.com/tylerdonet/p/5509398.html
- caffe(9) caffe例子
为了程序的简洁,在caffe中是不带练习数据的,因此需要自己去下载.但在caffe根目录下的data文件夹里,作者已经为我们编写好了下载数据的脚本文件,我们只需要联网,运行这些脚本文件就行了. 注意: ...
- linux安装memcacehed
1.wget http://www.danga.com/memcached/dist/memcached-1.2.5.tar.gz 2.wget http://www.monkey.o ...
- Redis-Sentinel原理及配置详解【转】
https://www.cnblogs.com/zhoujinyi/p/5570024.html
- java 线程传参 方式
第一类:主动向线程传参 public class ThreadTest extends Thread { public ThreadTest() { } /** * 第一种通过构造方法来传递参数 ...