css中transform包括三种: 旋转rotate(), translate()移动, 缩放scale(), skew()扭曲以及矩形变换matrix()

语法:

transform: none | <transform-function> [ <transform-function> ]*

transform: rotate | translate | scale | skew | matrix

注解: none: 表示不进行变换

<transform-function>表示可以多个变化叠加,彼此之间用空格隔开

适用范围:块级元素和内联元素均可使用

兼容性写法:

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); /* Opera*/

------------------------------------------------------------------------------------------------

旋转:

1.rotate(a) (绕着旋转中心2D旋转)

参数是角度,单位是deg,不进行变换则为none

旋转中心:默认是对象正中心,可通过transform-origin来定义

兼容性: 均支持

eg:rotate(5deg)顺时针5度 rotate(-10deg)逆时针10度

2.rotateX(a) (绕着X轴3d旋转)

IE, opera不支持

3.rotateY(a) (绕着Y轴3d旋转)

IE, opera不支持

-----------------------------------------------------------------------------------------------------

位置变换:

1.translate(x,y)(2D位置变化)

单位可为px,em,rem和%

若未提供y则默认y为0,基点默认对象中心,可通过transform-origin改变

兼容性:均支持

2.translateX()在X轴方向上进行位置变换

3.translateY()在Y轴方向上进行位置变换

-------------------------------------------------------------------------------------------------------

缩放:

1.scale(x, y)

x,y为数字,缩放的比例

若未提供y则默认与x轴的缩放比例一样,可改变基点

兼容性:均支持

2.scaleX()

只在X轴方向上进行缩放

兼容性:均支持

3.scaleY()

只在X轴方向上进行缩放

兼容性:均支持

--------------------------------------------------------------------------------------------------------

拉伸:

1.skew(x, y)

单位是deg,在x,y轴方向上进行拉伸

若未提供y则默认为0

2.skew(x)

3.skew(y)

均兼容性良好

-----------------------------------------------------------------------------------------------------------

矩阵变换:

matrix(涉及数学上的矩阵,应用面小,此处先不做解释)

详情可参考:http://www.w3cplus.com/content/css3-transform

transform 属性小解的更多相关文章

  1. 图层的transform属性

    Main.storyboard // //  ViewController.m //  7A11.图层的transform属性 // //  Created by huan on 16/2/4. // ...

  2. 通过transform属性改变图片的位置大小等信息

    对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...

  3. 2016 - 1- 14 UI阶段学习补充 transform属性详解

    UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...

  4. transform属性

    transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffin ...

  5. 理解SVG坐标系统和变换: transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  6. Swift - 通过设置视图的transform属性实现动画

    设置视图对象的transform属性,可以实现各种动画效果. 1,移动 指在同一平面内,将控件按照某个直线方向平移一定的距离. 1 2 3 4 5 //每次都从当前位置平移 self.imageVie ...

  7. 11--tag 和transform属性

    tag 和transform属性 1.tag 标签,就相当于身份识别的标码,可以通过tag值获取对应的对象. 2.使用transform 实现对象的平移和旋转. // // ViewControlle ...

  8. IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView

    UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...

  9. animation,transform属性

    animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...

随机推荐

  1. Sass入门:第四章

    1.加法 加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的CSS: .box { width: 788px; } ...

  2. POJ 2068 Nim#双人dp博弈

    http://poj.org/problem?id=2068 #include<iostream> #include<cstdio> #include<cstring&g ...

  3. Cmake常用指令

    1. cmake_minimum_required(VERSION 2.8)           检查cmake的版本,至少为2.8 2. project(helloworld)           ...

  4. 越狱开发-创建真正的后台程序(Daemon Process)

    在网上搜索了一下如何在IOS上面实现Daemon Process,只有chrisalvares的博客中有过详细的描述,但是其博客中描述的较为复杂, 参考stackoverflow中的一个问答: htt ...

  5. 理解 Storm 拓扑的并行度(parallelism)概念

    组成:一个运行中的拓扑是由什么构成的:工作进程(worker processes),执行器(executors)和任务(tasks)! 在一个 Storm 集群中,Storm 主要通过以下三个部件来运 ...

  6. SecureCRT - 使用方法和技巧

    1. 保活防掉线选项 -> 会话选项 -> 终端勾选 自动重新连接, 发送协议 NO-OP 每60秒 2. 拷贝与粘贴的设置选项 -> Global options -> Te ...

  7. 放弃阿里云主机,选择高性价比Vultr VPS免备案

    阿里云主机ECS推广多年后,质量有所改善,但我依然强烈不推荐阿里云主机.考虑性价比带宽速度等因素后,我推荐的vps品牌有vultr和digitalocean,还有大名鼎鼎的linode,是中国用户的最 ...

  8. Spring 中,对象销毁前执行某些处理的方法

    通过 @PreDestroy 和 bean 中配置 destroy-method 实现该功能 java 代码中: 1: public class TestClass { 2: private Sche ...

  9. poj1256(全排列stl)

    #include<stdio.h>#include<string.h>#include<algorithm>using namespace std;bool cmp ...

  10. python-连接数据库

    from sqlalchemy import create_engine,text,Column,Integer,String,Sequencefrom sqlalchemy.ext.declarat ...