下面我们从3个方面开始介绍:

1、scale(x,y) 对元素进行缩放

  • X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
  • Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准
  1. transform:scale(2,2.5);
 
2、scaleX(<number>) 元素只在X轴(水平方向)缩放元素。
 
  • 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
  1. transform:scaleX(2);
 
3、scaleY(<number>) 元素只在Y轴(垂直方向)缩放元素。
 
  • 基点一样在元素的中心位置。可以通过transform-origin来改变基点。
  1. transform:scaleY(2);
 
 
最后我们看看兼容性写法
 
  1. .test{
  2. -moz-transform:scale(2,2);
  3. -webkit-transform:scale(2,2);
  4. -o-transform:scale(2,2);
  5. background:url(img/i.png) no-repeat;
  6. width:198px;
  7. height:133px;
  8. }

css3动画属性系列之transform细讲scale缩放的更多相关文章

  1. css3动画属性系列之transform细讲旋转rotate

    1.语法: transform: none |  <transform-function> [<transform-function>]* 2.取值: none         ...

  2. CSS3动画属性:变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  3. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  4. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  5. Css3动画属性总汇

    http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...

  6. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  7. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  8. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  9. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

随机推荐

  1. virtualbox和vagrant卸载脚本在macbook

    virtualbox和vagrant在macbook版本的安装文件内,都有一个卸载脚本uninstall.tool vagrant2.1.5卸载脚本: #!/usr/bin/env bash #--- ...

  2. Android学习之Design Support Library中TextInputLayout的使用

    今天学习了一个Android Design Support Library 中的TextInputLayout控件,感觉还不错,较之以往的Editetxt,多了几分灵活性,使用也非常easy,故此给大 ...

  3. Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...

  4. Mac OS安装git

    mac系统在AppStore里下载最新的Xcode,目前最新版本是Version 8.3.1 (8E1000a), 由于最新版的Xcode里已集成了git,所以下载后可直接在终端使用git了.

  5. [Windows Azure] Getting Started with Windows Azure SQL Data Sync

    Getting Started with Windows Azure SQL Data Sync In this tutorial, you learn the fundamentals of Win ...

  6. windows 定时任务:schtasks,定时关闭网易云音乐

    大部分属于转载和粘贴. 使用命令:schtasks windows 定时任务   使用样例: 每天定时关闭网易云音乐: 每天22:20关闭网易云音乐: schtasks /create /tn &qu ...

  7. 笔记本貌似好了(HP 450 卡)

    2013年9月份在苏宁上 买了个HP450,配置应该算还勉强,i5, 4G, 照理说一般LOL,DOTA,应该还可以.但是经常在打完一盘后,切出来,卡的要命,一直没有解决,昨天晚上虚拟机切出来,更是, ...

  8. 【Linux技术】磁盘的物理组织,深入理解文件系统

    磁盘即是硬盘,由许多块盘片(盘面)组成,每个盘片的上下两面都涂有磁粉,磁化后可以存储信息数据.每个盘片的上下两面都安装有磁头,磁头被安装在梳状的可以做直线运动的小车上以便寻道,每个盘面被格式化成有若干 ...

  9. Arrays.sort()的底层实现

    1.基本类型(以int为例) 源码中的快速排序,主要做了以下几个方面的优化: 1)当待排序的数组中的元素个数较少时,源码中的阀值为7,采用的是插入排序.尽管插入排序的时间复杂度为0(n^2),但是当数 ...

  10. Windows下GUI编程——窗口

    windows下创建一个基于GUI的窗口程序很简单,使用MFC或者Win32 API都可以实现.本文简单整理下windows API创建GUI应用程序的基本编码框架. 比较常见的窗口包括:桌面窗口.应 ...